Quiero que un lienzo html tenga una imagen de fondo y quiero que mi dibujo en esa imagen de fondo mantenga su ubicación cuando cambie el tamaño de la imagen. También quiero que el lienzo ocupe toda la pantalla. Puedo mantener el dibujo del lienzo alineado con la imagen de fondo cuando la altura del lienzo es la misma que la altura calculada de la imagen de fondo. Pero cuando el lienzo tiene el tamaño de pantalla completa, cambiar el tamaño del lienzo aplasta el dibujo y no se mantiene alineado con la imagen de fondo.

el lienzo no se alinea con la imagen de fondo cuando canvas.style.height es 100%

el lienzo se mantiene alineado con la imagen de fondo, pero el lienzo no tiene el tamaño completo

Y aquí está el código utilizado para el controlador de eventos de cambio de tamaño:

 const onResize = () => { let backgroundImageWidth, backgroundImageHeight; const backgroundImageSource = document.querySelector("#responsive-canvas") .style.backgroundImage; const problemBackgroundImage = new Image(); problemBackgroundImage.onload = function () { let aspect_ratio = this.width / this.height; backgroundImageWidth = 0.45 * window.innerWidth; backgroundImageHeight = backgroundImageWidth / aspect_ratio; const calculatedHeight = window.innerWidth / aspect_ratio; let img = document.createElement("img"); img.src = dataURL; // dataURL is the value of canvas.toDataURL() canvas.width = window.innerWidth; canvas.height = calculatedHeight; canvas.style.height = calculatedHeight; // commenting out this line gives me the fullsize canvas, but the drawing does not line up. img.onload = function () { context.drawImage(img, 0, 0, canvas.width, canvas.height); context.restore(); }; }; };