How to get the first and last position of a mouse on object in HTML5 Canvas?

Question

I have a bar drew in Canvas.
When user clicks anywhere in the bar I want to get the start position. Then, the user drags the mouse to any position and releases the mouse and I would get the last position.

I've been doing that for some time but I couldn't get the right events.

Here's my code.

<canvas id="demoCanvas" width="500" height="300"></canvas>

var stage = new createjs.Stage("demoCanvas");

var rect = new createjs.Shape();
rect.graphics.beginFill("#000").drawRect(0, 20, 200, 50);

rect.on('mousedown', function (mousedownEvent) {
    var startX = mousedownEvent.rawX;
    console.log('mousedown');
});

rect.on('mouseup', function(mouseupEvent) {
   var stopX = mouseupEvent.rawX;
    console.log('mouseup');
    console.log(stopX);
});

stage.addChild(rect);
stage.update();

http://jsfiddle.net/noppanit/x0bdq3aa/

Answer 1

Check this code once, Here you will get x and y position continously.

  function writeMessage(canvas, message) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '18pt Calibri';
    context.fillStyle = 'white';
    context.fillText(message, 10, 25);
  }
  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();


    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
  var canvas = document.getElementById('demoCanvas');
  var context = canvas.getContext('2d');

  canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message);
  }, false);

check this fiddle-> http://jsfiddle.net/x0bdq3aa/3/

This is to get the mouse coordinates relative to Canvas,getMousePos() method which returns the mouse coordinates based on the position of the client mouse and the position of the canvas obtained from the getBoundingClientRect() method of the window object.

Answer 2

The event you are looking for is 'pressup' , _{you may also need 'mouseleave' and 'mouseout' .}

Strangely, this easeljs tutorial explicitly says that you can use the 'mouseup' event as you just did.

However, when you look to the docs about events attached to the Stage class and the ones attached to the DisplayObject class , there is no mention of this 'mouseup' .

About the 'pressup' event :

After a mousedown occurs on a display object, a pressup event will be generated on that object when that mouse press is released. This can be useful for dragging and similar operations.

 var stage = new createjs.Stage("demoCanvas"); var rect = new createjs.Shape(); rect.graphics.beginFill("#000").drawRect(0, 20, 200, 50); rect.on('mousedown', function (mousedownEvent) { var startX = mousedownEvent.rawX; snippet.log('mousedown'); }); rect.on('pressup', function(mouseupEvent) { var stopX = mouseupEvent.rawX; snippet.log('mouseup'); snippet.log(stopX); }); stage.addChild(rect); stage.update(); 

 <script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script> <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <canvas id="demoCanvas" width="500" height="70"></canvas>