Canvas | Introducción

La API Canvas provee los medios para dibujar gráficos mediante Javascript y el elemento HTML <canvas>.

Entre otras cosas, se puede utilizar para realizar animaciones, videojuegos, visualización de datos y procesamiento de video en tiempo real.

La API Canvas se enfoca principalmente en gráficos en 2 dimensiones. La API WebGL también utiliza el elemento HTML <canvas>, pero se emplea para dibujar gráficos en 2D y 3D con aceleración por hardware.

Si bien este sitio es parte de un curso introductorio de <canvas>, se requieren conocimientos previos de HTML5, Javascript (mínimo ES6) y manejo de DOM.

Es aconsejable tener conocimientos sólidos de:

  • Bucles for y while.
  • Funciones de orden superior (forEach(), map()).
  • Funciones de temporización / timming functions (setInterval()).
  • Eventos (event listeners).
  • Clases de JS (objetos, constructores).
  • Conocimientos básicos de matemática y geometría (ejes de coordenadas, ángulos).

En internet hay muchos recursos y documentación sobre este tema.

Los más completos y confiables son:

Todos los ejemplos publicados en este sitio están explicados en esta lista de repoducción de YouTube.

Sobre JS y requisitos previos:
The Net Ninja | https://www.thenetninja.co.uk/

Con un catálogo que va desde lo básico de HTML hasta implementaciones de frameworks, el autor posee uno de los canales de Youtube más didácticos.

Se recomiendan los cursos de introducción a HTML, introducción a CSS e introducción a JS.

Los cursos están en inglés.

Wes Bos | https://www.wesbos.com/

Es un desarrollador y orador canadiense que se especializa en React, Node, Express, Gatsby, entre otros frameworks de JS.

Se recomienda realizar la serie de ejercicios "Javascript 30" para mejorar los skills en este lenguaje.

Los cursos están en inglés. Algunos poseen subtítulos en varios idiomas.

Bluu Web | https://bluuweb.org/

Para quienes no tienen un nivel de inglés muy desarrollado, existe el canal de este autor.

Se recomiendan los cursos de introducción a HTML, introducción a CSS e introducción a JS.

Los cursos están en castellano.