JSFiddle - React, Tailwind, and code Playground

by wsmithrill

HTML

<input type="button" id="togglePathing" value="Toggle Path Editing"/>
<canvas id="c" />

JavaScript

var canvas = $("#c");
var c2 = canvas.getContext('2d');
c2.fillStyle = '#f00';
c2.beginPath();
c2.moveTo(0, 0);
c2.lineTo(100,50);
c2.lineTo(50, 100);
c2.lineTo(0, 90);
c2.closePath();
c2.fill();

$(document).ready(function() {
    alert("ready");
    var addingToPath = false;
    var arrayOfPoints = [];
    
    $("#togglePathing").bind("click", function() {
        if (addingToPath) {
            $("#c").unbind("click");
            addingToPath = false;
            redrawCanvas();
        }
        else {
            $("#c").bind("click", function(e) {
                arrayOfPoints[arrayOfPoints.length] = {
                    x: e.clientX,
                    y: e.clientY
                };
                redrawCanvas();
            });
            addingToPath = true;
        }
    });

    function redrawCanvas() {
        //c2.clearRect(0, 0, $("#c").width(), $("#c").height());
        c2.fillStyle = '#00f'; // blue
        c2.strokeStyle = '#f00'; // red
        c2.beginPath();
        c2.moveTo(arrayOfPoints[0].x, arrayOfPoints[0].y);
        for (var i in arrayOfPoints) {
            c2.lineTo(arrayOfPoints[i].x, arrayOfPoints[i].y);
        }
        c2.closePath();
        c2.fill();
    }
});