Display Image using canvas in JavaScript/jQuery

Question

I have the following code :

function createImage(source) {                
var pastedImage = new Image();                
pastedImage.onload = function() {                                        
document.write('<br><br><br>Image: <img src="'+pastedImage.src+'" height="700" width="700"/>');                                                                                                         
}
pastedImage.src = source;                
}

Here I am displaying the image through html image tag which I wrote in document.write and provide appropriate height and width to image.

My question is can it possible to displaying image into the canvas instead of html img tag? So that I can drag and crop that image as I want?

But how can I display it in canvas?

Further I want to implement save that image using PHP but for now let me know about previous issue.

Answer 1

Use CanvasRenderingContext2D.drawImage.

function createImage(source) {                
  var ctx = document.getElementById('canvas').getContext('2d');
  var pastedImage = new Image();
  pastedImage.onload = function(){
    ctx.drawImage(pastedImage, 0, 0);
  };
  pastedImage = source;
}

Also MDN seems to be have nice examples.