Problem with hypeGestureXPosition and html canvas on responsive layout

Hello great people!

I am attaching my working file, a painting app using html canvas.

My painting coordinates work if I use event.offsetX / event.offsetY but then I have no touch support. If I try to use hypeGestureXPosition / hypeGestureYPosition the painting only works if the layout is not scaled. I have also tried e.changedTouches[0].clientX / e.changedTouches[0].clientY but it causes the same problem as the hypeGesture route.

Basically, when painting, the paint will be aligned top-left but as the cursor/touch moves further from this point, the paint drifts away.

If anyone is able to look at my file and tell me if there's a workaround that would be greatly appreciated!

Warm regards,
Raph.

Hype template 3.0.hype.zip (1.0 MB)

Here is a much simpler version of the file, illustrating the problem I am experiencing when trying to allow touch input. If you swap the lines indicated to change from mouse input to touch input, you will see the problem I am encountering with touch only being 'accurate' in the upper-left corner.

Hopefully this might make it easier to debug! Thanks :slight_smile:

simple.hype.zip (17.4 KB)

I am on the phone and can’t look at code or the file. Anyway general hint: Have you considered fetching the scale factor and using it as a divisor on the gesture coordinates? Why are you or is the canvas scaling anyway?

2 Likes

change the paint-function slightly ... just hacked together -> NOT well tested

var scaleX, scaleY, wrapperEl;
wrapperEl = hypeDocument.getElementById('outer');
var [scaleX, scaleY] = getComputedStyle(wrapperEl).getPropertyValue("transform").replace(/[a-z\(\)]/g,'').split(', ').map((i) => parseFloat(i)).filter(function(currentValue, index){if(index === 0 || index === 3) {return currentValue}});
	
	canvasRect = canvas.getBoundingClientRect();
	
	
ol = canvasRect.left;
ot = canvasRect.top;


	
	
	if(event['hypeGesturePhase'] == 'start') {
		

x = (event['hypeGestureXPosition'] - ol) / scaleX;
y = (event['hypeGestureYPosition'] - ot) / scaleY;

		
		ctx.moveTo(x,y);
		
	  	
	} else if (event['hypeGesturePhase'] == 'move') {

x = (event['hypeGestureXPosition'] - ol) / scaleX;
y = (event['hypeGestureYPosition'] - ot) / scaleY;

		
		ctx.lineTo(x,y);
		ctx.stroke();

	    ctx.lineTo(x,y);
	    ctx.stroke();	    
	}
4 Likes

Wow, Hans, you've done it again! Thank you very much, your solution worked very well :slight_smile:

1 Like

looking forward to a preview of the finished project :slight_smile: liked it ...

1 Like