JSFiddle - React, Tailwind, and code Playground

by pukster

HTML

<html>

    <head>
        <script type="text/javascript">

            var cOut ='rgba(0,0,255,1.0)';
            var cOver = 'rgba(255,0,0,1.0)';
            var shape;
            var shapeType={
                    RECTANGLE:0,
                    CIRCLE:1,
                    OTHER:2
            }

            function initCanvas(){
            canvas=document.getElementById('canvas1');    //get the canvas element from HTML

            canvas.height=1000;
            canvas.width=1750;
            ctx = canvas.getContext("2d");

            if (window.Event) {
                document.captureEvents(Event.MOUSEMOVE);    //mouse movement
            }
            document.onmousemove=onMouseMove;
            }

            function onMouseMove(e){
                    var x = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
                    var y = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
                    if (shape.isInside(x,y) && ! shape.inside){
                            shape.inside = true;
                            shape.onMouseOver();
                    }
                    else if (!shape.isInside(x, y) && shape.inside){
                            shape.onMouseOut();
                            shape.inside = false;
                    }

            }

            function Box(x,y,w,h){
                    this.x=x;
                    this.y=y;
                    this.w=w;
                    this.h=h;
                    this.color=cOut;
                    this.inside = false;

                    this.draw=function(){
                            ctx.fillStyle=this.color;
                            ctx.fillRect(this.x,this.y,this.w,this.h);
                    }

                    this.onMouseOver=function(){
                          ...