JSFiddle - React, Tailwind, and code Playground

by mvasilkov

HTML

<canvas id="aaa" width="256" height="256"></canvas>
<canvas id="bbb" width="256" height="256"></canvas>

JavaScript

var aaa = document.getElementById('aaa');
var bbb = document.getElementById('bbb');

var ca = aaa.getContext('2d');
var cb = bbb.getContext('2d');

ca.fillStyle = '#f00';
ca.fillRect(0, 0, 256, 256);

var ida = ca.getImageData(0, 0, 256, 256);
var idb = cb.getImageData(0, 0, 256, 256);

var da = ida.data;
var db = idb.data;

var splice = [].splice

var size = 256 * 256 * 4, i;
for (i = 0; i < size; i += 4) {
    /*
    idb.data[i] = ida.data[i]
    idb.data[i+1] = ida.data[i+1]
    idb.data[i+2] = ida.data[i+2]
    idb.data[i+3] = ida.data[i+3]
    */

    db[i] = da[i]
    db[i+1] = da[i+1]
    db[i+2] = da[i+2]
    db[i+3] = da[i+3]
}

cb.putImageData(idb, 0, 0)