Canvas es una etiqueta de HTML que tiene como objeto crear un lienzo para despues dibujar mediante script de, por ejemplo, JavaScript. Posee dos atributos, height y width que se miden en pixeles. Este sería el ejemplo de como declarar un canvas. Sin embargo estos pueden declararse y se recomienda que se haga en CSS

<canvas width="300" height="400"></canvas>

ATENTI

Como regla general está desaconsejado usar canvas si te importa la accesibilidad de tu producto. Se suele utilizar para juegos sobre todo.

Darle contexto al canvas

ATENTI

Esta parte se realiza utilizando JavaScript por lo que necesitas abrir un script o enlazar un archivo JS.

Antes de poder dibujar debemos decidir que clase de objeto diseñaremos en el canvas. Esto lo hacemos con la propiedad getContext y estas son las posibilidades

• canvas.getContext(”2d”) → Crea un objeto en dos dimensiones
• canvas.getContext(”webgl”/”webgl2”) → Crea un objeto renderizado en 3D. El numero depende de la version de webgl que se trabaje
• canvas.getContext(”bitmaprenderer”)→ Crea un objeto en formato de mapa de bits

Dibujar en el canvas

ATENTI

Esta parte se realiza utilizando JavaScript por lo que necesitas abrir un script o enlazar un archivo JS.

Una vez que definimos que clase de objeto crearemos, es hora de empezar a dibujar. Es importante que primero definamos el contexto del canvas

let lienzo = canvas.getContext("2d");

Para poder realizar el dibujo utilizaremos la función fillRect, metodo exclusivo de los objetos 2D que creará un rectangulo. Tiene la siguiente estructura

lienzo.fillRect(20,10,150,100). 20, 10, 150, 100