CanvasContext2D drawImage() issue [onload and CORS]

You have to wait that your image has loaded before you can paint it on the canvas.

To do so, simply use the load event handler of your <img> element :

// create a new image
var img = new Image();
// declare a function to call once the image has loaded
img.onload = function(){
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var context = canvas.getContext('2d');
  context.drawImage(img, 0,0);
  var dataURL = canvas.toDataURL();
  // now you can do something with the dataURL
  doSomething(dataURL);
}
// now set the image's src
img.src = "http://somerandomWebsite/picture.png";

Also, for the canvas’ context.toDataURL() and context.getImageData to work properly, you have to get your image resource in a cross-origin compliant way, otherwise the canvas is “tainted” which means that any method to get pixels data will be blocked.

• If your image comes from the same server, no problem.
• If your image is served from an external server, be sure that it allows yours in its cross-origin headers and set the img.crossOrigin to "use-credentials".
• If the server does allow anonymous requests, you can set the img.crossOrigin to "anonymous".

Nota Bene : CORS header is sent by the server, the cross-origin attribute will only let it know that you want to use CORS to get the image data, in no way you can circumvent it if the server is not set properly.
Also some UserAgents (IE & Safari) still haven’t implemented this attribute.

Edge Case : If some of your images are from your server and some are from a CORS compliant one, then you may want to use the onerror event handler which should fire if you set the cross-origin attribute to "anonymous" on a non CORS server.

function corsError(){
  this.crossOrigin='';
  this.src="";
  this.removeEventListener('error', corsError, false);
} 
img.addEventListener('error', corsError, false);