Question

I am working on complex task so my issue should not make real sense, but the issue is how to draw a point using putImageData with color information of some point that was previously obtain via getImageData.

Let’s say I have a 200px horizontal line A (0, 0) – B (199, 0). I can read its pixel color information using

var pixels = ctx.getImageData(0, 0, 200, 1); // horizontal line :: 200 pixels

but once I have pixels array (pixel.length = 800), I want to draw just some points from this line on different place(s). Just point, not line.

This will draw the entire line:

ctx.putImageData(pixels, 20, 20);

But how can I draw just one point C (20, 20) with pixel color information from n-th point of the line A – B?

How can I use putImageData with array of rgba (array.lenght = 4) using data from pixels?

Answer 1

putImageData has another set of arguments, a dirty rectangle:

putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

With this you can specify a rectangle within the image data to copy back. It will copy only the pixels in that rectangle back to the canvas.

So this will get you your horizontal line, as you said:

var pixels = ctx.getImageData(0, 0, 200, 1); // horizontal line :: 200 pixels

This will put the one pixel at (20,0) in the image data at the location (20,0) in your canvas:

ctx.putImageData(pixels, 0, 0, 20, 0, 1, 1)

Note that you still have to start the x/y offset at 0,0, this is because of how the dirty rectangle works. You aren’t putting the one pixel at (20,0) back at (0,0), instead you’re putting the entire image data back starting at (0,0) but not copying over any of it except whats inside the dirty rectangle. This makes