From the code below you can see that I misunderstand how putImageData
works:
// create canvas:
let canvas = document.createElement("canvas");
canvas.width = 2;
canvas.height = 1;
let ctx = canvas.getContext("2d");
// grab its imageData:
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log(imageData.data);
// edit its imageData:
imageData.data[0] = 10;
console.log(imageData.data);
// put the edited image data onto the canvas:
ctx.putImageData(imageData, 0, 0);
// check that the edited data is actually on the canvas:
let finalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log(finalImageData.data);
That code outputs these logs:
[0, 0, 0, 0, 0, 0, 0, 0]
[10, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0]
I expected that last console.log
to output [10, 0, 0, 0, 0, 0, 0, 0]
. Where am I going wrong in my understanding here?
(To be sure, I've tested with Firefox and Chrome - same result. Definitely seems like a very fundamental misunderstanding on my part.)