JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" style="width: 100px; height: 100px;" width="100" height="100"></canvas>
<canvas id="canvas2" style="width: 200px; height: 100px;" width="100" height="100"></canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

var ctx = document.getElementById('canvas1').getContext('2d');
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 100, 100);

    var ctx2 = document.getElementById('canvas2').getContext('2d');
    ctx2.fillStyle = "red";
    ctx2.fillRect(0, 0, 100, 100);