canvasputimagedata

Cannot change canvas imageData


i'm facing a bug in my script that i don't understand. I try to modify a canvas imageData after modifying it's data. data is a Int32Array

var clampedArray = new Uint8ClampedArray(data);
var newImgData=ctx.createImageData( WIDTH, HEIGHT);
newImgData.data = clampedArray;
console.log(newImgData.data, clampedArray);
ctx.putImageData(newImgData,0 ,0);

This console.log() return :

 Uint8ClampedArray { 0=0, 1=0, 2=0, plus...} Uint8ClampedArray { 0=37, 1=54, 2=18, plus...}

So newImageData.data is not modify by this line :

newImgData.data = clampedArray;

What the hell? i should miss something, but what?


Solution

  • The correct method of setting new image data is to use the set() method:

    newImgData.data.set(clampedArray);