touch pointer problem about webretro HOT 6 CLOSED

I think I understand, the pointer position is incorrect? This is caused by my code for proper scaling, but you haven't implemented it on your UI.

You need to resize the canvas so that the CSS width/height are the real width/height on the page, but the width/height HTML attributes are the width/height used by the WASM application.

var elementWidth = 960;
var elementHeight = 720;

canvas.style.setProperty("width", elementWidth + "px", "important");
canvas.style.setProperty("height", elementHeight + "px", "important");
canvas.width = elementWidth * window.devicePixelRatio;
canvas.height = elementHeight * window.devicePixelRatio;

This code will also make the image a lot clearer.

from webretro.

nono,i need a bigest "canvas".

The larger the canvas, the clearer the image.

can you open the retroarch.nenge.net
using f12 console,moble mode.

click "open" the "psx"

clixk "test" to start

from webretro.

Larger canvas doesn't mean clearer image. The code I sent adjusted the internal dimensions of the canvas so that the canvas would stay the same size but the image would become clear.

Here is a more updated method that should work for you:

function adjustCanvasSize(width, height) {
	canvas.style.setProperty("width", width + "px", "important");
	canvas.style.setProperty("height", height + "px", "important");
	
	var dpr = window.devicePixelRatio || 1;
	if (Module && Module.setCanvasSize) {
		Module.setCanvasSize(width * dpr, height * dpr);
	} else {
		canvas.width = width * dpr;
		canvas.height = height * dpr;
	}
}

adjustCanvasSize(960, 720);

// optionally attach this to a window resize event listener

from webretro.

adjustCanvasSize is like my code.nothing change.

if using style transform scale is not need hack js.
but this one will add top:-xxx;left:-xxx;

from webretro.

You shouldn't use style transform scale, using different CSS dimensions and HTML attribute dimensions is not a hacky thing to do.

from webretro.

Can I close this issue now?

from webretro.