JSFiddle - React, Tailwind, and code Playground

by greatCar

HTML

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      function writeMessage(canvas, message) {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect(), root = document.documentElement;

        // return relative mouse position
        var mouseX = evt.clientX - rect.top - root.scrollTop;
        var mouseY = evt.clientY - rect.left - root.scrollLeft;
        return {
          x: mouseX,
          y: mouseY
        };
      }

      window.onload = function() {
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        writeMessage(canvas,'click Me!!!')

        canvas.addEventListener('click', function(evt) {
          var mousePos = getMousePos(canvas, evt);
          var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
          writeMessage(canvas, message);
        }, false);
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
  </body>
</html>