tengo un problema al querer hacer el canvas a pantalla completa, el problema es que quiero hacerlo sin transformaciones de escala css, lo quiero hacer desde css y js con tamaños definidos
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);
}}
El problema es que al querer usar el mouse para seleccionar coordenadas del canvas estas cambian la posición al estar reescalado La verdadera pregunta ¿es como le hago para poder poner escala y que funcionen las coordenadas del mouse sin problemas y a pantalla completa?