I have a problem wanting to make the canvas full screen, the problem is that I want to do it without scale transformations css, I want to do it from css and js with defined sizes
function autoScale(id) {
var d = document, E, iw = window.innerWidth,
ih = window.innerHeight, X, Y, scale;
if(typeof id == 'object') E = id;
else E = d.getElementById(id);
X = iw/2 - E.width/2; // centro en x
Y = ih/2 - E.height/2;// centro en y
if (iw/E.width > ih/E.height) {
scale = ih/E.height;
} else if (iw/E.width < ih/E.height) {
scale = iw/E.width;
} else {
scale = 1;
}
document.getElementsByTagName("html")[0].style.overflow = "hidden";
// acomodar en el centro y escalar a pantalla completa
E.style.transform = 'translate('+X+'px,'+Y+'px) scale('+scale+')';
document.body.width = iw;
// para que se ejecute al cambiar el tamaño de la ventana
window.onresize = function (event) {
autoScale(id);
}}
The problem is that when wanting to use the mouse to select coordinates of the canvas they change the position when rescaled The real question is how do I do it in order to scale and work the mouse coordinates smoothly and in full screen?