How do I retrieve raw bitmap data from html5 canvas using JavaScript?

Question

I would like to know how to extract the raw data from a html5 canvas as raw bitmap pixel data and store it in a variable.

So far I have setup my html5 canvas with an image in it: https://jsfiddle.net/t21mjh5L/1/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("myimg");
ctx.drawImage(img,0,0);
var bitmapData;
//retrieve image data as raw bitmap

Answer 1

you can try to get bitmap data like this :

var myImageData = ctx.getImageData(left, top, width, height).data;

More information about getting image data can be found here