¿El lienzo HTML5 admite el zoom basado en navegador?

Question

Había configurado un lienzo simple con un texto de relleno dibujado en él. Se ve bastante bien, pero cuando uso la función de zoom proporcionada por el navegador (Safari, Firefox), el antialiasing se ve feo.

He intentado usar scale() levantar la grilla, pero no ayuda.

¿Hay alguna manera de dibujar en un lienzo que se vea nítido incluso con una ventana ampliada del navegador?

---

captura de pantalla (sin zoom): http://i.stack.imgur.com/CGWka.png

captura de pantalla (zoom máximo): http://i.stack.imgur.com/vNPjF.png

Answer 1

Puede 'zoom' un lienzo escalando el contexto de la lona antes de los comandos de dibujo para dar lugar a los elementos dibujados en un tamaño más grande, sin problemas. Por ejemplo, vea this example of mine que le permite acercar el zoom en los elementos del dibujo y ver detalles que no están disponibles en la presentación predeterminada.

El problema con el zoom del navegador es que el lienzo HTML5, como JPG o PNG, y a diferencia de SVG, se basa en píxeles individuales. Si dibuja un círculo en 10 píxeles y luego le dice al navegador que lo acerque a 50 píxeles, el navegador no puede "inventar" datos para dibujar un círculo suave. Lo mejor que puede hacer es proporcionar interpolación de imágenes para intentar que los 'píxeles grandes' se vean un poco más suaves.

La solución

Con una imagen, se puede tomar una foto con una gran cantidad de píxeles (por ejemplo 1000x800) y decirle al navegador para mostrarla en un tamaño más pequeño diferente (por ejemplo, 250x200). Cuando el navegador amplía, tiene más píxeles para mostrar. Por ejemplo:

<img src="1000x800.jpg" style="width:250px; height:200px"> 

Puede hacer lo mismo con un lienzo. El número de píxeles de datos en el lienzo están especificados por los atributos height y width (en HTML o JavaScript). Puede especificar por separado el tamaño de visualización CSS (como el anterior) a un tamaño más pequeño. Ni siquiera necesita modificar su código de dibujo de lienzo existente; simplemente:

1. Ajuste el height y width de la lona por un factor determinado (por ejemplo 4),
2. Uso de CSS para definir la altura de la pantalla y una anchura de nuevo a su tamaño original, y luego
3. Antes de todo otros comandos de dibujo, escale su contexto con ctx.scale(4,4).

Editar: He creado un ejemplo de esto aquí:
http://jsfiddle.net/u5QPq/embedded/result/ (code)

Esto es lo que parece cuando se acerque:

Como un beneficio adicional , su lienzo también imprime más suavemente (en caso de que alguien se dedique a matar árboles).