El canvas de HTML 5 (III). Redimensionando canvas.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

Este es un artículo muy breve para explicar una cosa que es importante conocer. Cuando dimensionamos canvas, debemos, en general, hacerlo usando los atributos width y height. Hacerlo mediante CSS origina distorsiones en todos los contenidos, por lo que sólo emplearemos el dimensionado por CSS en aquellos casos en los que queramos, específicamente, que los contenidos se distorsionen para adaptarse al contenido del nuevo canvas.

Desafortunadamente, aunque los contenidos gráficos se generan mediante código, al final quedan como imágenes de mapa de bits, no vectoriales, como uno podría, en principio, pensar. Por lo tanto, al distorsionar las imágenes, se pierde calidad en las mismas.

Esto se debe a que CSS sólo actúa sobre el canvas, pero no puede actuar sobre el contexto, por lo que, cuando dimensionamos un canvas por CSS, incluso si lo hacemos antes de crear el contexto, este se crea sobre la base del tamaño original del canvas, y luego se redimensiona, con todos sus contenidos “estirando” o “encogiendo” los píxeles, hasta alcanzar el tamaño CSS del canvas.

UN EJEMPLO DE TAMAÑO DE CANVAS

Cuando queremos crear un canvas, si sus dimensiones no deben ser las que HTML 5 establece por defecto, lo ideal es establecer los atributos width y height en la etiqueta <canvas>. Si no podemos hacerlo (porque estos vayan a cambiar), los modificaremos desde JavaScript o jQuery, pero siempre actuando sobre los atributos en sí, no por CSS.

Para que veamos claro de que estamos hablando, hemos creado un código que dibuja dos canvas de tamaño estándar, y les incluye un rectángulo como vimos en el artículo anterior. El primero se redimensiona por CSS, con lo que distorsiona todo. El segundo se redimensiona por atributos, con lo que no hay distorsión. El código se llama canvas_007.htm:

En las líneas resaltadas ves como redimensionamos uno y otro lienzo. Como ves a continuación, en ambos se dibuja un simple rectángulo, definiendo ambas formas con las mismas dimensiones. El resultado con CSS es desolador.

Y, como no me iba a olvidar de ti, aquí te dejo el código de este artículo para descargar en este enlace.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *