JSFiddle - React, Tailwind, and code Playground

by vinodlouis

HTML

<canvas id="canvas1"></canvas>

JavaScript

var canvas = document.getElementById('canvas1'); 
canvas.width  = 500;
canvas.height = 500;

 var ctx = document.getElementById('canvas1').getContext('2d');

  var img = new Image();
  img.src = 'http://i.imgur.com/nWQLH3K.png';
  img.onload = function(){
    ctx.drawImage(img,0,0,375,225);
  } 
  
canvas.addEventListener('mousemove', function(evt) {
        var mousePos = getMousePos(canvas, evt);
        var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    console.log(message);
       // writeMessage(canvas, message);
      }
                        
function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }