Cambiar el tamaño de un lienzo HTML en blanco su contenido

Question

Tengo un elemento de lienzo HTML que se redimensiona cuando el usuario cambia el tamaño de la pantalla.

canvas.height = pageHeight(); 
canvas.width = pageWidth(); 

El cambio de tamaño real funciona bien, pero en blanco el lienzo.

Me gustaría mantener el contenido. ¿Hay algún otro método para cambiar el tamaño de un elemento de lienzo, o hay una forma de almacenar los contenidos y luego dibujarlos de nuevo en el lienzo?

Answer 1

Debe cambiar el tamaño del lienzo con CSS o volver a dibujar el lienzo después de cambiar el tamaño.

Si desea guardar el contenido de la tela y volver a dibujar, puedo pensar en algunas opciones:

1. Uso context.getImageData para agarrar todo el lienzo, cambiar el tamaño del lienzo, a continuación, utilizar context.putImageData que volver a dibujarlo en la nueva escala
2. Cree un objeto Image, establezca la fuente en el resultado de canvas.toDataUrl(), cambie el tamaño del lienzo y luego dibuje la imagen en la nueva escala.
3. llame al context.setScale(xscale, yscale) y llame a la función que utilizó para dibujar el lienzo originalmente. Suponiendo que configuró xscale y yscale correctamente, automáticamente escalará todo al nuevo tamaño.
4. Cree un nuevo lienzo con el tamaño actualizado y llame al context.drawImage(oldCanvas, ...) para copiar el lienzo viejo en el nuevo. Luego cambiarías el viejo lienzo por el nuevo.

Las dos primeras opciones no funcionarán si ha dibujado una imagen desde un dominio diferente al lienzo en cualquier momento, y no son compatibles con implementaciones anteriores.

En mi opinión, la opción 3 (redibujar la imagen en la nueva escala) es la mejor si es posible. Es la única opción que mantendrá sus líneas completamente lisas y nítidas, y siempre funcionará (suponiendo que todavía tenga toda la información para generar la imagen).