Can JavaScript canvas be manipulated like a bitmap, and is it optimized for that use?

Can a JavaScript canvas be manipuled like a standard bitmap (accessing/modifying a pixel and getting it's size)? Is this use optimized, or would it be faster to manipulate normal 2d arrays of pixels and draw over canvas when you need it?

Answers


Absolutely yes! Please have a look here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas

As for your second question, as per the pixels documentation, pixels is a one dimensional array. You'll need to do your own 2 x 2 hoopla for a 2d way.

Taken from a previous SO answer by I82Much (works dandy for me):

int row = i;
int col = j;
int offset = row * width + col;
color p = pixels[offset];

More here: how to loop over the pixels using 2D array? and here: http://www.processing.org/reference/pixels.html


You can get an array of pixel data from the canvas context using getImageData(). Bear in mind that each pixel takes-up 4 spaces in the array (for red, green, blue and alpha). Then, once you've altered the array to your liking, you can use putImageData() to put the data back.


Need Your Help

asp.net Internet Explorer image cache?

c# asp.net image internet-explorer

I'm writing an asp.net app in c#. In my program an image of a schedule grid has lines drawn on it depending on the selections from the user. When the user selects a day, the image is redrawn to s...