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: /

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

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/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

• javascript
• html
• canvas
• bitmap

Share Improve this question Follow asked Jan 6, 2016 at 18:53 user1869257user1869257 50544 gold badges77 silver badges1818 bronze badges 1

• Have you seen this older question? – Pointy Commented Jan 6, 2016 at 18:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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