Canvas Offset problem

Using JavaScript with Hype
1

Hi,

First, I’m sorry for my poor english ! I try to use the command Canvas in Hype.
But canvas.offsetTop and canvas.offsetLeft is not registering the position of the canvas on the scene.
So, the position of mouse clicks on canvas isn’t correct (It may be ok if the browser window is small)
It seems that the position is not relative ?

Here the file :
tile-puzzle.zip (127.0 KB)

For example :

The difference change wit the browser window :-/

Any suggestion is greatly appreciated :slight_smile: Thank you in advance

2

replace canvas.offsetLeft/Right with:

	var posX = canvas.getBoundingClientRect().left; 
var posY = canvas.getBoundingClientRect().top;
3

Thanks for your help.

I tried but it doesn’t work :’( It seems that the position selector doesn’t appear anymore.

Otherwise,I found a little solution with the functions of the Hype software but it is not really good because it’s necessary to use the absolute position :

Here the file : tile-puzzle2.zip (127.4 KB)

This solution work but the window is blocked on the side :’( I am looking for a other solution but it’s difficult for a beginner like me :slight_smile:

Thx in advance

4

Is this what you want?

5

First, I thank you for making me discover this feature :slight_smile:

But, that does not solve my problem. The image is distorted and the position is not preserved.

I would like to use relative position so animation can be at the center of browser windows (with an image that keeps its proportions) and to know if it’s possible fix offset issue for mouse pointer on canvas. (Looks like the canvas coordinates are not calculated)

Thanks again

6

tile-puzzle-canvas.hype.zip (117.4 KB)
works for me, be honest you did not test my previous hint¿ :wink:

7

Awesome ! U R the best ! :wink: In addition U R funny :grin: I’ve test ur previous hint but I didn’t put it in the right place, I’m a real big newbie :slight_smile:

My problem is solved : thx a lot !!!