title: Replace HTML5 canvas Elements With img Elements
body: <p>Want to replace the canvas element to image element.</p>
  
  <p>Already tried to convert the canvas to image using jquery. But the empty image is displaying without any images.</p>
  
  <p></p>
  
  <pre><code>&lt;script&gt;
          function loadImages(sources, callback) {
          var images = {};
          var loadedImages = 0;
          var numImages = 0;
          // get num of sources
          for(var src in sources) {
            numImages++;
          }
          for(var src in sources) {
            images[src] = new Image();
            images[src].onload = function() {
              if(++loadedImages &gt;= numImages) {
                callback(images);
              }
            };
            images[src].src = sources[src];
          }
        }
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
  
        var sources = {
          image1: 'Group 1.png',
          image2: 'Rectangle 5.png',
          image3: 'Motif_2.png',
          image4: 'body_design_2.png'
        };
  
        loadImages(sources, function(images) {
          context.drawImage(images.image1, 0, 0, 484, 984);
          context.drawImage(images.image2, 42, 0, 400, 747);
            context.drawImage(images.image3, 0, 0, 484, 984);
            context.drawImage(images.image4, 42, 0, 400, 747);
        });
          &lt;/script&gt;
          &lt;script&gt;
              $(document).ready( function(e)
              {
                  $('canvas').each( function(e)
                  {
                      var image = new Image();
                      image.src = this.toDataURL("image/png");
  
                      $(this).replaceWith(image);
                  });
              });
          &lt;/script&gt;
  </code></pre>
  
  <p>Replace the canvas element to image element.Any solution regarding this question.</p>