JSFiddle - React, Tailwind, and code Playground

by alexvestin

HTML

<canvas id="myCanvas" width="640" height="480" onmousemove="lineDraw()"/>

JavaScript

// DISCLAIMER: This error only occurs in Chrome. Firefox won't draw any line in case of an error.

function lineDraw() {
    // Get the context and the canvas:
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    // Clear the last canvas
    
    context.clearRect(0, 0, canvas.width, canvas.height);
    	context.beginPath();
    // Draw the line:
    context.moveTo(0, 0);
    context.lineTo(event.clientX, event.clientY);
    context.stroke();
}