JSFiddle - React, Tailwind, and code Playground

by Will Stott

HTML

<body onmousedown="return false;">
        <canvas id="myCanvas" width="578" height="200">
        </canvas>
    </body>

<!--
============================================================
Capturing The Mouse Position in IE4-6 & NS4-6
(C) 2000 www.CodeLifter.com
Free for all users, but leave in this  header
//-->

<html>
<body>

<!-- Part One:
Set up a form named "Show" with text fields named "MouseX"
and "MouseY".  Note in the getMouseXY() function how fields
are addressed, thus: document.FormName.FieldName.value
//-->

<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> MouseX<br>
<input type="text" name="MouseY" value="0" size="4"> MouseY<br>
<input type="button" onmousedown="loop(); mouseDown = 1;" value="Start" /><br>
<input type="button" onclick="encryptnow()" value="End" /><br>
</form>

<!-- Part Two:
Use JavaScript ver 1.2 so older browsers ignore the script.
The <script> must be *after* the <form> -- since the form
and fields must exist *prior* to being called in the script.
//-->

<script language="JavaScript1.2">

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY
  }  
  // catch possible negative values in NS4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  
  // show the position values in the form named Show
  // in the text fields named MouseX and MouseY
 ...

CSS

body {
                margin: 0px;
                padding: 0px;
            }
            
            #myCanvas {
                border: 1px solid #9C9898;
            }

JavaScript

var startX = 160;
var startY = 100;
var controlX1 = 350;
var controlY1 = 70;
var controlX2 = 460;
var controlY2 = -50;
var endX = 488;
var endY = 170;

var mouseDown = 0;

function drawCurve() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, 578, 200);

    context.beginPath();
    context.moveTo(startX, startY);
    //context.moveTo(160, 100);
    context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);


    //bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
    context.lineWidth = 4;
    context.strokeStyle = "black"; // line color
    context.stroke();
}

function loop () {
    var i = 1;
    //alert("lol");
    if (i==1) {
        startX = document.Show.MouseX.value;
        startY = document.Show.MouseY.value;
        drawCurve();
    }
    
    if (mouseDown = 0) {
        loop ();
    }
}

document.body.onmousedown = function() {
    alert("mousedown");
    mouseDown = 1;
    loop();
}
document.body.onmouseup = function() {
    mouseDown = 0;
}