JSFiddle - React, Tailwind, and code Playground

by Justin Maat

HTML

<div>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
</div>

<div>
<canvas id="myCanvas2" width="100" height="100" style="border:1px solid #d3d3d3;">
</div>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);

var i;
for (i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i+0] = 255;
    imgData.data[i+1] = 0;
    imgData.data[i+2] = 0;
    imgData.data[i+3] = 255;
}

ctx.putImageData(imgData, 10, 10);

var imageDataArrayCopy = new Uint8ClampedArray(imgData.data);
var i2;
for (i2 = 0; i2 < imgData.data.length; i2 += 4) {
    imgData.data[i2+0] = 0;
    imgData.data[i2+1] = 255;
    imgData.data[i2+2] = 0;
    imgData.data[i2+3] = 255;
}
imgData.data = imageDataArrayCopy

//un comment out this line and you'll see the updated imageData that was copied/altered just got put back over that same context
//ctx.putImageData(imgData, 10, 10)