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

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.