JSFiddle - React, Tailwind, and code Playground

by rodrigonery

HTML

<!-- Tamanho do Canvas e a msg caso o navegador não suporte -->
<canvas id="retangulo" width="500" height="500">
Esse texto será mostrado caso o seu navegador não suporte o HTML5 Canvas.
</canvas>

JavaScript

(function() {
    // Pega o ID do canvas...
    var canvas = document.getElementById('retangulo');
    var context = canvas.getContext('2d');

      // BeginPath, FillRect, FillStyle, lineWidth, Strokestyle..
        context.beginPath();
        // Fill Rect segundo as dimensões que você falou..
        // X, Y e width e height
        context.fillRect(100, 150, 260, 150);
        // Não sei a cor..
        context.fillStyle = 'blue';

        // x, y, largura e altura do retangulo...
        // context.clearRect(x,y,width, height)

        // Chutei qualquer uma lineWidth... Você não especificou..
        context.lineWidth = 2;
        context.strokeStyle = 'red';
  }( ));