JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="600" height="400">:(</canvas>
<canvas id="canvas2" width="600" height="400">:(</canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var pixelSet = ctx.createImageData(50,50); // Черный квадрат 50 x 50 полностью прозрачный

ctx.fillStyle = "#000000";
ctx.fillRect(0,0, 600, 400);    
ctx.putImageData(pixelSet, 20,20);


var canvas = document.getElementById('canvas2');
var ctx2 = canvas.getContext('2d');
ctx2.fillStyle = "#002244";
ctx2.fillRect(0,0, 600, 400);  
ctx2.putImageData(pixelSet, 20,20);