JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<canvas id="desenho" width="400" height="400"></canvas>

JavaScript

var largura = 500;
    var altura = 300;

    var desenho = document.getElementById("desenho");
    desenho.setAttribute("width", largura);
    desenho.setAttribute("height", altura);

    var ctx = desenho.getContext("2d");
    var py=0,px = 0;
    desenho.addEventListener('click',function (evt) {

   

        ctx.fillStyle = "#000";
        if(py-evt.y>px-evt.x){
        ctx.lineTo(px,evt.y);
        }else{
          ctx.lineTo(evt.x, py);

        }
         ctx.lineTo(evt.x,evt.y);
        ctx.stroke();
        px = evt.x;
        py = evt.y;
    });