JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

HTML

<canvas id="mycanvas" width="800" height="450", position: relative></canvas>

JavaScript

var canvas = document.getElementById("mycanvas");
    context = canvas.getContext("2d");
    canvas.addEventListener("mousemove", mouseMoved);
    context.fillText("Put mouse here", 10, 10);

    function mouseMoved(e) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        var imageObj = new Image();

                imageObj.src = "http://findicons.com/files/icons/1072/face_avatars/300/a02.png";
                imageObj.onload = function() {
                    context.drawImage(imageObj, e.clientX - (canvas.offsetLeft - window.pageXOffset), e.clientY - (canvas.offsetTop - window.pageYOffset), 224, 320);
               
                
                }; 

         // the following code that displays a still image works.
         /*var imageObj = new Image();

                imageObj.src = "avatar.png";
                imageObj.onload = function() {
                    context.drawImage(imageObj, 225, 100, 224, 320);
                };*/ 
    }