Eat The Dungeon General Discussion

Curated Projects Eat The Dungeon
, , ,
3118

Would you mind making the canvas have a fixed size and instead use css to scale the canvas? I find it leads to better visuals, especially on mobile (compressed image previews don’t show the issue too well, try to view fullscreen):

WEB
WEB1920×887 99.9 KB

PWA
PWA1920×887 125 KB

Possible Fix

I implemented the fix above by making the input system work with any canvas size, patching:

// onmousemove
INPUT.mouse_screen.x = mouse.clientX - canvas.getBoundingClientRect().left;
INPUT.mouse_screen.y = mouse.clientY - canvas.getBoundingClientRect().top;

// ontouchstart
INPUT.mouse_screen.x = event.changedTouches[0].pageX - canvas.getBoundingClientRect().left;
INPUT.mouse_screen.y = event.changedTouches[0].pageY - canvas.getBoundingClientRect().top;

// ontouchmove
INPUT.mouse_screen.x = event.changedTouches[0].pageX - canvas.getBoundingClientRect().left;
INPUT.mouse_screen.y = event.changedTouches[0].pageY - canvas.getBoundingClientRect().top;

to

// onmousemove
INPUT.mouse_screen.x = ((mouse.clientX - canvas.getBoundingClientRect().left) / canvas.getBoundingClientRect().width) * canvas.width;
INPUT.mouse_screen.y = ((mouse.clientY - canvas.getBoundingClientRect().top) / canvas.getBoundingClientRect().height) * canvas.height;

// ontouchstart
INPUT.mouse_screen.x = ((event.changedTouches[0].pageX - canvas.getBoundingClientRect().left) / canvas.getBoundingClientRect().width) * canvas.width;
INPUT.mouse_screen.y = ((event.changedTouches[0].pageY - canvas.getBoundingClientRect().top) / canvas.getBoundingClientRect().height) * canvas.height;

// ontouchmove
INPUT.mouse_screen.x = ((event.changedTouches[0].pageX - canvas.getBoundingClientRect().left) / canvas.getBoundingClientRect().width) * canvas.width;
INPUT.mouse_screen.y = ((event.changedTouches[0].pageY - canvas.getBoundingClientRect().top) / canvas.getBoundingClientRect().height) * canvas.height;

I then removed the canvas resize logic:

var w = Math.min(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.min(document.documentElement.clientHeight, window.innerHeight || 0);

// If statement
canvas.height > h -  25

// Border resizing
canvas.width = (w - 25);
canvas.height = (w - 25) *  600 / 1080;

to

var w = 1080;
var h = 600;

// If statement
false

// Border resizing
canvas.width = w;
canvas.height = w *  600 / 1080;

Then just slapped some css to the canvas:

window.canvas.style["max-width"] = "100%";
window.canvas.style["max-height"] = "100%";
window.canvas.style.margin = "auto";
window.canvas.style.border = "unset";
2 Likes