One more thing that is worth knowing about, even though it may not immediately be applicable, is how to work with individual pixels in the canvas. The ImageData
object type has 3 properties: width
, height
and data
. The last of those is a 1-dimensional array of the RGBA bytes for every pixel, so its length is width x height x 4.
The graphics context for our canvas has two useful methods:
let imData = g2.getImageData(x, y, width, height);
g2.putImageData(imData, x, y);
As usual MDN has a very useful tutorial covering many more aspects of this.