Home/ Questions/Q 7651117
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T11:25:35+00:00

I’m trying to make a canvas which can be operated via the mouse (dragging,

  • 0

I’m trying to make a canvas which can be operated via the mouse (dragging, drawing, clicking…), which would seem to be a simple task. Currently I have it drawing a line from where the mouse was pressed to where ever it is now, until it is released. But all the old versions of the line continue to be drawn regardless of whether I clear the canvas. I’ve tried using beginPath/closePath and fill instead of stroke; both approaches caused the line to never appear. Is there some… “delimiter” of draw operations that I haven’t been able to find?

The source may be viewed and tested here, and I’ve also included it below.

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas</title>
  </head>
  <body>
    <canvas id="test" width="640" height="480"></canvas>
    <script type="text/javascript">
      (function (){
        // http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
        function getMousePos(obj, evt){
          // get canvas position
          var top = 0;
          var left = 0;
          while (obj && obj.tagName != 'BODY') {
            top += obj.offsetTop;
            left += obj.offsetLeft;
            obj = obj.offsetParent;
          }

          // return relative mouse position
          var mouseX = evt.clientX - left + window.pageXOffset;
          var mouseY = evt.clientY - top + window.pageYOffset;
          return {
            x: mouseX,
            y: mouseY
          };
        }
        var canvasElement = document.getElementById('test');

        if(canvasElement.getContext){
          var canvas = canvasElement.getContext('2d');
          var start = null;
          var end = null;
          var drawing = false;

          canvasElement.addEventListener('mousedown', function (event){
            var mousePos = getMousePos(canvasElement, event);
            start = mousePos;
            end = mousePos;

            drawing = true;
          }, false);
          canvasElement.addEventListener('mousemove', function (event){
            if(drawing){
              end = getMousePos(canvasElement, event);
            }
          }, false);
          function release(event){
            drawing = false;
          }
          canvasElement.addEventListener('mouseup', release, true);

          var FPS = 30;
          setInterval(function() {
            canvas.clearRect(0, 0, canvasElement.width, canvasElement.height);
            if(drawing && start != null){
              canvas.moveTo(start.x, start.y);
              canvas.lineTo(end.x, end.y);
              canvas.stroke();
            }
          }, 1000/FPS);
        }
      })();
    </script>
  </body>
</html>​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to create a path with beginPath and closePath, like so:

        canvas.clearRect(0, 0, canvasElement.width, canvasElement.height);
    if(drawing && start != null){
      canvas.beginPath();
      canvas.moveTo(start.x, start.y);
      canvas.lineTo(end.x, end.y);
      canvas.closePath();
      canvas.stroke();
    }

    Otherwise you’ll just keep adding lines to the existing path.

    • 0