On the // perform any pixel manipulation you need on this canvas part, could you give an example of what that manipulation might look like? For example setting the red-value of every pixel to 0.
Great article though! I'm just not exactly sure how to access the pixels
With the data property, you will have one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255. You can process this data as you please, then create a new ImageData, and put this new data onto your buffer canvas with putImageData developer.mozilla.org/en-US/docs/W...
On the
// perform any pixel manipulation you need on this canvas
part, could you give an example of what that manipulation might look like? For example setting the red-value of every pixel to 0.Great article though! I'm just not exactly sure how to access the pixels
Hey Jeff,
you have access to a 2D context of the canvas when the image is rendered onto a canvas element (assuming the browser is modern).
With the 2D context, you can invoke the method
getImageData
developer.mozilla.org/en-US/docs/W...
This will return
ImageData
developer.mozilla.org/en-US/docs/W...With the
data
property, you will have one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255. You can process this data as you please, then create a newImageData
, and put this new data onto your buffer canvas withputImageData
developer.mozilla.org/en-US/docs/W...
Thanks! That's exactly what I needed.