Canvas How to - Draw over image as mouse move

Question

We would like to know how to draw over image as mouse move.

Answer


<!--from   w  ww  .  j  a v  a2 s .  com-->


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
window.onload=function(){
    var canvas = document.getElementById('canvas');
    var g = canvas.getContext('2d');
    function drawCanvas(mouseX, mouseY) {
        var img = new Image();
        img.src = 'http://www.java2s.com/style/download.png';
        img.crossOrigin = 'anonymous';
        g.clearRect(0, 0, 200, 200);
        g.drawImage(img, mouseX - 15, mouseY - 15, 30, 30);
        if(mouseX < 15 || mouseY < 15 || mouseX > 200 - 15 || mouseY > 200 - 15) {
            g.fillStyle = 'rgba(255, 0, 0, 0.3)'; // 30% opacity red
            g.fillRect(mouseX - 15, mouseY - 15, 30, 30); // Draw this over top of your image
        }
    }
    drawCanvas(0, 0);
    canvas.addEventListener('mousemove', function(e) {
        drawCanvas(e.pageX, e.pageY);
    }, false);
}
</script>
</head>
<body>
  <canvas id="canvas" width="200" height="200">Your browser does not support canvas.</canvas>
</body>
</html>

The code above is rendered as follows: