JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<canvas id="myCanvas" width="578" height="200" style="background-color: rgba(20, 20, 20, 0.02)"></canvas>
<br />
<span></span>

JavaScript

$(document).mousemove(function (event) {
                var offset = $('#myCanvas').offset();
                RelativeY = event.pageY - offset.top;
                RelativeX = event.pageX - offset.left;
            
                $("span").text("Offset.left = " + RelativeX + "\n" + "Offset.top = " + RelativeY);
            
                var canvas = document.getElementById(obj.canvasName);
                var context = canvas.getContext('2d');
                canvas.width = 400;
            
                context.beginPath();
                context.moveTo(RelativeX, 0);
                context.lineTo(RelativeX, canvas.height);
                context.moveTo(0, RelativeY);
                context.lineTo(canvas.width, RelativeY);
                context.lineWidth = 0.2;
                context.stroke();
                context.beginPath();
                context.rect(RelativeX + 4, RelativeY - 54, 100, 50);
                context.fillStyle = 'white';
                context.fill();
                context.font = '8pt Helvetica';
                context.fillStyle = 'black';
                context.fillText("Close: " + RelativeX, RelativeX + 5, RelativeY - 40);
                context.fillText("Volume: " + RelativeX * 1000, RelativeX + 5, RelativeY - 30);
                context.fillText(RelativeX * 10 + " days ago", RelativeX + 5, RelativeY - 20);
            });