¿Admite el canvas HTML5 el zoom basado en browser?

Había configurado un canvas simple con un text de relleno dibujado sobre él. Se ve bastante bien, pero cuando uso la function de zoom proporcionada por el browser (Safari, Firefox), el antialiasing se ve feo.

Intenté usar scale () raise the grid, pero no ayuda.

¿Hay alguna manera de dibujar en un canvas que se vea nítido, incluso con una window del browser ampliada?


Captura de pantalla (sin zoom): http://img.javascriptes.com/javascript/CGWka.png

Captura de pantalla (zoom máximo): http://img.javascriptes.com/javascript/vNPjF.png

Puede "acercar" un canvas escalando el context del canvas antes de dibujar los commands para que los elementos dibujados en un tamaño más grande, sin problemas. Por ejemplo, vea este ejemplo mío que le permite acercarse a los elementos del sorteo y ver los detalles que no están disponibles en la presentación pnetworkingeterminada.

El problema con el zoom del browser es que el canvas 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 browser que lo acerque a 50 píxeles, el browser no puede "devise" 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 image, puede tomar una image con una gran cantidad de píxeles (por ejemplo, 1000×800) y decirle al browser que la muestre en un tamaño diferente, más pequeño (por ejemplo, 250×200). Cuando el browser amplía, tiene más píxeles para mostrar. Por ejemplo:

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

Puedes hacer lo mismo con un canvas. La cantidad de píxeles de datos en el canvas se especifica mediante los attributes de height y width (en HTML o JavaScript). Puede especificar por separado el tamaño de visualización de CSS (como el anterior) a un tamaño más pequeño. Ni siquiera necesita modificar su código de dibujo de canvas existente; simplemente:

  1. Ajuste la height y el width de su canvas por un factor particular (por ejemplo, 4)
  2. Use CSS para establecer el alto y el ancho de la pantalla en el tamaño original, y luego
  3. Antes de todos los demás commands de dibujo, ctx.scale(4,4) su context con ctx.scale(4,4) .

Editar : he creado un ejemplo de esto aquí:
http://jsfiddle.net/u5QPq/embedded/result/ ( código )

Esto es lo que parece cuando haces zoom:
enter image description here

Como una ventaja adicional, su canvas también se imprimirá más suavemente (en caso de que alguien se dedique a matar treees).