JSFiddle - React, Tailwind, and code Playground

by Terrance Smith

HTML

<canvas id="canvas" width="400" height="600" >

</canvas>
<input type="text" value="" id="xval"/>
<input type="text" value="" id="yval"/>

CSS

canvas {                
            border: solid black 1px;                
            width:  400px;                
            height: 600px;            
        }

JavaScript

function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
//Fair warning this causes endless loop
    
    window.color = "rgba(0, 0, 200, 0.5)";
    window.Mouse = {
            x:0,
            y:0
        };
        
    $(document).ready(function(){
        
        draw();
        $("canvas").mousemove(function(event){
            
            window.Mouse.x = event.pageX - this.offsetLeft;
            window.Mouse.y = event.pageY - this.offsetTop;
            $("xval").text = window.Mouse.x;
            $("xval").val = window.Mouse.x;
            $("yval").text = window.Mouse.y;
            $("yval").val = window.Mouse.y;
            //redraw(window.Mouse.x,window.Mouse.y, window.color);
        })
    });
    
    function redraw(x,y, color) {
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = color;
            ctx.fillRect (x, y, 10, 10);
        }
    }