API Canvas
Ya se explicó en otra sección el concepto de API en desarrollo de software. Una API (Application Programming Interface) es un gran conjunto de código que representan propiedades y métodos que apuntan a un ámbito de desarrollo concreto.
En este caso, la API Canvas permite insertar y manipular gráficos, elementos de dibujo o alterar pixeles (incluso de forma interactiva) en un área de dos dimensiones insertada en una página web.
Los siguientes tres elementos (recuadro gris, cuadro azul y café) están agrupados de la siguiente forma: el elemento canvas (gris) contiene a los dos elementos que fueron creados indicando el tipo de gráfico (o lo que es lo mismo, indicando el contexto visual o el contexto de dibujo) en el que ambos gráficos deben ser mostrados.
El área del <canvas> no tiene un comportamiento natural de adaptación del ancho del navegador (o del viewport). En otras palabras, ese comportamiento obedecerá a las dimensiones que le sean indicadas.
Una forma de indicar dimensiones del elemento <canvas> es:
En HTML
<canvas id="elementoCanvas" width="200" height="200"></canvas>
Pero esas propiedades no permitirían un cambio dinámico cuando la ventana del navegador se expanda, o cuando pasemos de una dimensión de pantalla a otra.
En el siguiente ejemplo no se han indicado las propiedades de dimensiones directamente desde el elemento <canvas> (pero sí desde el estilo CSS de ese elemento).
En HTML
<canvas id="gameCanvas"></canvas>
En CSS
#gameCanvas{
width: 100%;
height: auto;
En JS
// Apuntando al elemento canvas (contenedor)
const canvas = document.getElementById('gameCanvas');
// Añade color al canvas
canvas.style.backgroundColor = "silver";
// ...
// RECUADRO AZUL
/* 1-Indicando contexto de dibujo */
const elem1 = canvas.getContext("2d");
// 2) Indicando posición y dimensiones
// (posiciónX, posiciónY, width, height )
elem1.fillRect(0,0,100,100);
// 3) Indicando color
elem1.fillStyle = "orange";
// ...
// RECUADRO CAFÉ
/* 1-Indicando contexto de dibujo */
const elem2 = canvas.getContext("2d");
// 2) Indicando posición y dimensiones
elem2.fillRect(101,80,80,80);
// 3) Indicando color
elem2.fillStyle = "yellow";
Una posible alteración ocurriría cuando agregamos un valor al height del canvas. Eso alteraría la proporción del canvas, especialmente cuando el ancho del navegador sea estrecho.
Muchas veces necesitaremos ajustar la altura del elemento HTML <canvas> a nuestro antojo. El siguiente ejemplo es una mejor solución para que los elementos internos del <canvas> se mantengan en proporción ante cualquier dimensión de altura que le indiquemos al <canvas>.
Ahora, otro problema de proporción es evidente: si bien la altura del elemento HTML canvas es dinámica y se adapta según el ancho del navegador, y si bien las proporciones no se distorsionan, sí se achican cuando el ancho del navegador se expante.
Ese comportamiento (el que se achiquen los elementos del canvas mientras el ancho del navegador se ensancha por interacción del usuario) no es dañíno por ahora. Espero más adelante seguir explorando otras soluciones.
Terminemos esta sección con el agregado de una imagen en el área del canvas. Recuerda: Sé libre de revisar desde Inspect Element > Element (desde el navegador) los códigos usados en estos ejercicios.