How to fix offset issue for mouse pointer on canvas on HTML5 fullscreen mode?

Question

I am using the HTML5 full_screen API to scale up this letter to full screen mode of the browser.

Follow https://bubbleideas.com/letters/html5-full_screen-api for the demo and steps to reproduce.

There seems a problem/bug with the way browser returns (x,y) value of pointer location of the mouse. In full_screen mode when you scroll down an offset is introduced between the mouse pointer and scribbled path.

Here are the steps to reproduce the issue. (go to above demo link)

Click on button on the right hand top of this page.
Click on "Free hand" drawing tool on the right bottom side. It will open up a stationery panel (Choose pen or pencil tool)
Scribble on the drawing area a couple of times
Now scroll down a bit and try to scribble with the same pen. You ll notice that there is gap/offset between mouse pointer position and scribbled path(this is the issue). Ideally, there should be no gap in the full screen mode either

Has someone been here before? Also note this works perfectly fine for other shapes like the square, circle and triangle without any offset.

UPDATE: (As asked by "Iftah" in the commment below) As per fabric js I use calcOffset() which recalculates offset on every mouse down. As far as other functions are concerned we do some thing like this. Hopefully this gives some idea

$("#rectangle-function").click(function (evt1) {
doCanvasUp();
initObjectDrawing();
//canvas.isDrawingMode = true;
canvas1 = document.createElement("canvas");
canvas1.height = canvas.height;
canvas1.width = canvas.width;
canvas1.id = "dummy-canvas";
canvas1.style.zIndex = 998;
canvas1.style.position = "absolute";
$(".page-body").prepend(canvas1);
$("#dummy-canvas").mousedown(function (evt) {
    var context1 = canvas1.getContext("2d");
    var offset = $("#dummy-canvas").offset();
    startX = evt.pageX - offset.left;
    startY = evt.pageY - offset.top;
    context1.beginPath();
    $("#dummy-canvas").mousemove(function (event) {
        context1.clearRect(0, 0, canvas1.width, canvas1.height);
        context1.strokeStyle = "#ff0000";
        context1.lineWidth = 1;
        context1.moveTo(startX, startY);
        var offset1 = $("#dummy-canvas").offset();
        var x = event.pageX - offset1.left;
        var y = event.pageY - offset1.top;
        var diffX = x - startX;
        var diffY = y - startY;
        context1.strokeRect(startX, startY, diffX, diffY);
        context1.closePath();
        context1.beginPath();
    }).mouseup(function (eventf) {
        $("#dummy-canvas").unbind('mousemove');
        $("#dummy-canvas").unbind('mouseup');
        var offset = $("#dummy-canvas").offset();
        //$("#dummy-canvas").remove();
        context1.clearRect(0, 0, canvas1.width, canvas1.height);
        var endX = eventf.pageX - offset.left;
        var endY = eventf.pageY - offset.top;
        var diffX = endX - startX;
        var diffY = endY - startY;
        var rect = new fabric.Rect({
            left: startX + diffX * 0.5,
            top: startY + diffY * 0.5,
            width: diffX,
            height: diffY,
            opacity: 1,
            fill: null,
            stroke: color
        });
        canvas.add(rect);
    });
});

Can you post your code for handling the mouse event in the hand-draw vs the mouse event in one of the tools that work fine (eg. triangle) ? I am guessing there is some difference there that makes one need offset and not the other. — Iftah, Apr 22 '13 at 13:24
I have updated the question, let me know in case of doubt, I can explain things here. Thanks — ʞɹᴉʞ ǝʌɐp, Apr 22 '13 at 13:54
Issue seems to be with fulscreen, as all calculation which works fine even when offset change in run time. (By adding new DOM ele, pushing down the canvas) — ʞɹᴉʞ ǝʌɐp, Apr 22 '13 at 13:57
The code posted looks just fine - you take the pageY and subtract the offset of the canvas - and this is the code that works fine (rectangle) - you haven't posted the problematic code (ie. free-hand drawing). There is no '#dummy-canvas' element when the free-hand is selected — Iftah, Apr 22 '13 at 14:14

score 0 · Answer 1 · edited May 23 '17 at 11:57

Without looking at your code it is impossible to tell exactly where the error is...

One problem could be when reading the mouse coordinates, IE. You could be wrongly using event.pageY instead of event.clientY or a similar confusion (see What is the difference between screenX/Y, clientX/Y and pageX/Y?)

Or you can say the problem is how you use those coordinates, ie. if you take the mouse event coordinates in screen space then before applying it on the canvas you need to subtract the canvas element screen offset and add the scrolling offset...

Since you have one tool that works and one that doesn't you can compare them and see where they differ.

How to fix offset issue for mouse pointer on canvas on HTML5 fullscreen mode?

1 Answers1