JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<canvas id="myCanvas" width="600" height="500"></canvas>

JavaScript

var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var redX1 = 100;
        var redY1 = 200;
        var blueX1 = 400;
        var blueY1 = 200;
        function createLine(moveTo1,moveTo2,lineTo1,lineTo2,lineWidth,color){
            context.beginPath();
            context.moveTo(moveTo1,moveTo2);
            context.lineTo(lineTo1,lineTo2);
            context.lineWidth = lineWidth;
            context.strokeStyle = color;
            context.stroke();
        }
        drawLine(redX1,redY1,blueX1,blueY1);
        function drawLine(redX1,redY1,blueX1,blueY1){
                         //Translucent thick line
            createLine(0,500,500,0,10,"rgba(0,0,0,0.2)");
                         //black line connected to the red ball
            createLine(0,500,redX1,redY1,5,"black");
                         //Connect to the black line of the blue ball
            createLine(500,0,blueX1,blueY1,5,"black");
                         // draw Bezier curve
            context.beginPath();
            context.moveTo(0,500);
            context.bezierCurveTo(redX1,redY1,blueX1,blueY1,500,0);
            context.stroke();
            function createBall(color,x,y){
                console.log(x,y)
                context.beginPath();
                context.fillStyle = color;
                context.arc(x,y,10,0,Math.PI*2);
                context.fill();
            }
            function createBallB(color,x,y){
                console.log(x,y)
                context.beginPath();
                context.fillStyle = color;
                context.arc(x,y,10,0,Math.PI*2);
                context.fill();
            }
                         //blue ball
            createBallB("blue",blueX1,blueY1);
                         //Red ball
            createBall("red",redX1,redY1);
            
            canvas.onmousedown = function(e){
                var ev = window.event || e;
                var x = ev.clientX -...