JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="100" height="100"></canvas>

JavaScript

var $canvas = $('canvas'),
        oldCanvas,
        context = $canvas[0].getContext('2d');
    
    function drawRects(x, y, width, height)
    {
      if (($canvas.width() < x+width) || $canvas.height() < y+height)
      {
        oldCanvas = $canvas[0].toDataURL("image/png")
        $canvas[0].width = x+width;
        $canvas[0].height = y+height;

        var img = new Image();
        img.src = oldCanvas;
        img.onload = function (){
          context.drawImage(img, 0, 0);
        };
      }
      context.strokeRect(x, y, width, height);
    }


    drawRects(5,5, 10, 10);
    drawRects(15,15, 20, 20);
    drawRects(35,35, 40, 40);
    drawRects(75, 75, 80, 80);