Get mouse position on responsive canvas on mousemove

Question

I have a responsive canvas with and it draw a square on mousemove, however I cannot target the mouse position of the canvas, however it works if the canvas is not responsive. how can I target the position of the mouse? Thank you in advance.

https://jsfiddle.net/Paul017/yz028mwe/3/

This is the code.

HTML:

<h4>Drag the mouse to create a rectangle</h4>
<canvas id="canvas" width=300 height=300></canvas>

CSS:

body{ background-color: ivory; }
#canvas{border:1px solid red; width:100%}

JS: var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");

ctx.strokeStyle = "rgba(255, 235, 59, 0.5)";
ctx.fillStyle = "red";
ctx.fill();
ctx.lineWidth = 1;

var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

var isDown = false;

var startX;
var startY;


function handleMouseDown(e) {
    e.preventDefault();
    e.stopPropagation();

    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);

    // set a flag indicating the drag has begun
    isDown = true;
}

function handleMouseUp(e) {
    e.preventDefault();
    e.stopPropagation();

    isDown = false;
}

function handleMouseOut(e) {
    e.preventDefault();
    e.stopPropagation();

    isDown = false;
}

function handleMouseMove(e) {
     e.preventDefault();
        e.stopPropagation();

        // if we're not dragging, just return
        if (!isDown) {
            return;
        }

        // get the current mouse position
        mouseX = parseInt(e.clientX - offsetX);
        mouseY = parseInt(e.clientY - offsetY);

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        var width = mouseX - startX;
        var height = mouseY - startY;

        ctx.strokeRect(startX, startY, width, height);

    }

score 0 · Answer 1 · answered Sep 07 '18 at 07:41

0

You can use the selectionStart or selectionEnd property of target method.

You can get target every position with:

e.target.selectionStart

or e.target.selectionEnd

In your code:

function handleMouseMove(e) {
console.log('target event ', e.target);
console.log('selectionStart', e.target.selectionStart);
console.log('selectionEnd', e.target.selectionEnd)
     e.preventDefault();
        e.stopPropagation();

        // if we're not dragging, just return
        if (!isDown) {
            return;
        }

        // get the current mouse position
        mouseX = parseInt(e.clientX - offsetX);
        mouseY = parseInt(e.clientY - offsetY);

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        var width = mouseX - startX;
        var height = mouseY - startY;

        ctx.strokeRect(startX, startY, width, height);

    }

If the console log show undefined, try to console log you e.target. You will find the selectionStart and selectionEnd method.

Let me know if you need something else.

answered Sep 07 '18 at 07:41

Skatt

372
3
10

may I know on how would you apply the selection start and selection end? – John Wick Sep 07 '18 at 08:19
the selection start and selection end should be visible (https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Property/selectionEnd) as a method when you console.log (e.target). Could you write which method you see when you console log (e.target) please? – Skatt Sep 07 '18 at 09:01
thanks for your help. I've already figured it out but not using selectionStart and selectionEnd – John Wick Sep 07 '18 at 09:14
What did you use then? I am curious :) – Skatt Sep 07 '18 at 09:42
this one. https://jsfiddle.net/Paul017/yz028mwe/28/ – John Wick Sep 08 '18 at 03:42

score 0 · Answer 2 · answered Sep 08 '18 at 03:45

I have already figured it out by using these mouse positions code to target the x and y location in a responsive canvas

 e.offsetX * canvas.width / canvas.clientWidth | 0
 e.offsetY * canvas.width / canvas.clientWidth | 0

https://jsfiddle.net/Paul017/yz028mwe/28/

Get mouse position on responsive canvas on mousemove

2 Answers2