JSFiddle - React, Tailwind, and code Playground

by pz_godlin

HTML

<body onload="initcnvs()" onmousedown="mDown(event)" onmousemove="mMove(event)" onmouseup="mUp(event)">
 <canvas id="cnvs" width="800" height="500"></canvas>
 </body>

CSS

body {
      margin: 0;
    }
    #cnvs {
      border: #000000 1px solid;
    }

JavaScript

var action = "up";
    var ctx,points,pointer;

var start_point = false;

    function initcnvs(){
      ctx = document.getElementById('cnvs').getContext('2d');
      ctx.globalAlpha = 0.1;
      points = new Array(10);
    };
    function mDown(e){
      //action = "down";
      //points[0] = [e.pageX, e.pageY];
      //  pointer = 0;
      start_point = [e.pageX, e.pageY];
    };
    function mUp(e){
      //points= new Array(10);
      //action = "up";
      start_point = false;

    };
    function mMove(e){
      //if (action == "down") {
      if (start_point) {
        //var nextpoint = pointer + 1;
        //if (nextpoint > 9) nextpoint = 0;
        ctx.beginPath();
        ctx.moveTo(start_point[0],start_point[1]);
        ctx.lineTo(e.pageX, e.pageY);
        //if (points[nextpoint]) {
        //  ctx.moveTo(points[nextpoint][0] + Math.round(Math.random()*10-5)
        //            ,points[nextpoint][1] + Math.round(Math.random()*10-5));
        //  ctx.lineTo(e.pageX, e.pageY);
        //}
        ctx.stroke();
        //pointer = nextpoint;
        //points[pointer] = [e.pageX, e.pageY];
      }
   };