JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<canvas id="can1" width="500" height="500"></canvas>1

JavaScript

// Variables
var x1;
var y1;
var isPressed = false;
var myCanvas;
var myContext;

function startCanvas() {

    // Canvas stuff
    myCanvas = document.getElementById("can1");
    myContext = myCanvas.getContext("2d");

    // Specify a black background, and white lines that are 3 pixels thick.
    myContext.fillStyle = '#fff';
    myContext.strokeStyle = '#fff';
    myContext.fillRect(0, 0, 500, 500);
    myContext.lineWidth = 3;
    myContext.fill();
}

function functionMouseDown(e) {
    // Get coordinates
    var cord = e.target.relMouseCoords(e);
    x1 = cord.x; 
    y1 = cord.y;

    isPressed = true;
}

function functionMouseMove(e) {
    // If mouse is down and moved start drawing line
    if (isPressed == true) {
        drawLine(e);
    }
}

function functionMouseUp() {
    // Stop drawing line
    isPressed = false;
    //myContext.closePath();
    //myContext.stroke();
}

function drawLine(e) {
    // Draw line
    var cord = e.target.relMouseCoords(e);
    var x = cord.x;
    var y =cord.y;

    myContext.strokeStyle = '#cc0000';
    myContext.lineWidth = 1;
    myContext.moveTo(x1, y1);
    myContext.lineTo(x, y);
    myContext.stroke();

    // Set start coordinates to current coordinates
    x1 = x;
    y1 = y;
}
$('#can1').on('mousedown', functionMouseDown).on('mousemove', functionMouseMove).on('mouseup', functionMouseUp);

    function relMouseCoords(event){/*needs fixing for general case*/
        var totalOffsetX = 0
        var totalOffsetY = 0
        var canvasX = 0
        var canvasY = 0
        var currentElement = this

        do{
            totalOffsetX += currentElement.offsetLeft
            totalOffsetY += currentElement.offsetTop
        }
        while(currentElement = currentElement.offsetParent)

        canvasX = event.pageX - totalOffsetX
        canvasY = event.pageY - totalOffsetY

        return {x:canvasX, y:canvasY}
    }

    HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
startCanvas();