13. ¿Qué es canvas en JavaScript

Lo primero que necesitamos es el elemento de HTML donde vamos a renderizar el canvas, canvas nos sirve para renderizar gráficos 2D. Como condición también tenemos que crear un contexto que es donde le decimos a canvas que queremos renderizar gráficos en 2d lo hacemos así

const game = canvas.getContext('2d');

Ahora la variable game ya tiene las propiedades para que usemos canvas, es recomendable usar canvas una vez el HTML se ha renderizado, por eso podemos usar un escuchador de eventos en el HTML para saber cuando se cargo y poder desde ese punto usar canvas.

• fillRect(): Con este definimos el lugar donde va a iniciar nuestro trazo o figura geométrica, recibe 4 parámetros

      game.fillRect(0,0,0,0);
  

  • El primer parámetro es el eje X donde inicia nuestro trazo.
  • El segundo parámetro es el eje Y.
  • El tercer parámetro es la medida de nuestro trazo o figura, es decir hasta dónde va a llegar y esta medida en en WITH o ancho.
  • El tercer parámetro también nos sirve para añadir medidas al trazo y esta medida es en HEIGTH o alto.

• clearRect(): Este nos sirve especialmente para borrar, esta función también recibe 4 parámetros y son los mismos antes mencionados, en este caso tenemos un borrado de la posición en Y y en X que le demos y los últimos 2 parámetros el grosor del borrado.

  game.clearRect(0,0,50,50);
  

• fillText(): Este nos permite insertar texto, cuando usemos esta propiedad es necesario que no solo le pasemos el texto sino también las propiedades para poderlo alinear.

  game.fillText('setso', 100,100);
  

Dando estilos a nuestro texto

Para dar estilos tenemos algunas propiedades como

• font: Con la propiedad font podemos añadir todos los estilos correspondientes a un texto como el tamaño o su tipografía.

     game.font = '25px verdana';
  

• fillStyle: Con fillStyle ya podemos darle otros estilos como el color

      game.fillStyle = 'purple';
  

• textAling(): Cómo su nombre lo dice es para poder alinear el texto, tenemos diferentes propiedades como: center, start, end, right, left…

      game.textAling = 'rigth';