Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
<head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
​
        canvas {
        position                    : absolute;
           top                         : 0;
           left                        : 0;
           border: 1px solid #9C9898;
        }
    </style>
    <script>
      // Creates second canvas on top of first one
          // Prepare a second canvas on top of the previous one, kind of second "layer" that we will use
    // in order to draw elastic objects like a line, a rectangle or an ellipse we adjust using the mouse
    // and that follows mouse movements
    
      
      
        function writeMessage(canvas, message) {
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.font = '18pt Calibri';
            context.fillStyle = 'black';
            context.fillText(message, 10, 25);
        }
​
        function getMousePos(canvas, evt) {
            // get canvas position
            var obj = canvas;
            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
            };
        }
​
        window.onload = function () {
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            var started = false, previousMousePos;
          
            // Create a second canvas
            var frontCanvas = document.createElement('canvas');
            frontCanvas.id = 'canvasFront';
            // Add it as a second child of the mainCanvas parent.
            canvas.parentNode.appendChild(frontCanvas);
            // make it same size as its brother
            frontCanvas.height = canvas.height;
            frontCanvas.width = canvas.width;
          
          // We track mouse events on the front canvas now !
            frontCanvas.addEventListener('mousemove', function (evt) {
                var mousePos = getMousePos(canvas, evt);
                var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
              
              // we draw the mouse pos in the front canvas, note that this function
              // erases the front canvas content each time it is called. Content
              // of the "normal" canvas is untouched.
              writeMessage(frontCanvas, message);
​
                // Let's draw some lines that follow the mouse pos
                if (!started) {
                    previousMousePos = mousePos;
                    started = true;
                } else {
                    context.beginPath();
                    context.moveTo(previousMousePos.x, previousMousePos.y);
                    context.lineTo(mousePos.x, mousePos.y);
                    context.stroke();
​
                    previousMousePos = mousePos;
                }
            }, false);
        };
    </script>
</head>
<body onmousedown="return false;">
<div id="divCanvas">
<canvas id="myCanvas" width="578" height="400">
   <p>Canvas tag not supported by your browser</p>
</canvas>
 </div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers