I load an external image and draw it on the Canvas element like so:

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function(evt) { context.drawImage(evt.target, 0, 0); }
image.src = "test.jpg";

But I want to get the ImageData. So after calling context.drawImage, I do this:

var imagedata = canvas.getImageData();
manipulate(imagedata); // modifies imagedata.data
context.putImageData(imagedata, 0, 0);

Is that the only way to get the imageData of an externally loaded image? Drawing the image on canvas & then getting the imagedata seems awfully slow. Am I missing something?

Thanks!