Canvas How to - Fill rectangle along mouse move

Question

We would like to know how to fill rectangle along mouse move.

Answer


<!-- w w  w . j a  v  a2  s  .  c  om-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
    var canvas = document.getElementById("imgCanvas");
    var context = canvas.getContext("2d");

    function draw(e) {
        var pos = getMousePos(canvas, e);
        posx = pos.x;
        posy = pos.y;
        context.fillStyle = "#000000";
        context.fillRect(posx, posy, 4, 4);
    }
    window.addEventListener('mousemove', draw, false);
    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
    }
}//]]>  
</script>
</head>
<body>
  <div id="images"></div>
  <canvas
    style="margin: 0; padding: 0; position: relative; left: 50px; top: 50px;"
    id="imgCanvas" width="250" height="250"></canvas>
</body>
</html>

The code above is rendered as follows: