¿Qué es canvas en JavaScript?

La propiedad textAling

 
Documentación

Font

Si ponemos px y no tipo de fuente no funciona. Aquí otros valores que le podemos dar.

fillRect() no recibe 4 coordenadas, recibe 2 coordenadas, que son apartir de donde inicia a dibujar, y luego el ancho y el alto.

fillRect( xinicial, yinicial, width, height)

Para los que no les sale el auto completado de los métodos del canvas, les puedo compartir un consejo para no cometer errores de tipados con frecuencia.

/**
 * @type {HTMLCanvasElement}
 */
const canvas = document.querySelector("#game");

En realidad lo que hace es decir que nuestra constante “canvas” es de tipo HTMLCanvasElement, lo que nos mostrara los métodos en VSCode.

Canvas - Coordenadas de inicio.

Obtenido de: Developer Mozilla

CheatSheet

Aqui algunos metodos de HTML5 Canvas:

function startGame(){
    game.fillRect(100,25,100,100);
    game.clearRect(125,50,50,50);
    game.fillText('PLATZI', 133,78);
}

Qué buena energía tiene el profesor! Vamos bien.

Recordatorio de eje x (horizontal) y eje y (vertical)

¿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);

Me parece interesante las funciones que existen en canvas
, espero poder aprender mas de ellas

Existen mas métodos o funciones para “dibujar” en canvas, una de ellas es:

strokeReact(x, y, width, height); 

La cual nos permite dibujar un contorno.

Acá puedes ver algunas funciones más: https://developer.mozilla.org/es/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

Para este caso me gusta más utilizar document.readyState

document.onreadystatechange = () => {
    const { readyState = "" } = document;
    if (readyState === "complete") {
        // Me gusta utilizar el $ siempre que hago referencia a un elemento del DOM lo considero como una buena práctica ya que facilita la lectura del código
        const $CANVAS = document.querySelector("#game");
        const CONTEXT = $CANVAS.getContext("2d");
        CONTEXT.fillRect(0, 0, 100, 100);
        // en esta parte se cargaría la función a utilizar 
    }
};

Lo de textAlign ta interesante el como ajusta el texto

Método fillRect( )

• Aprende sobre este método de la interface Canvas Rendering Context 2D:

  

• Resumen de WEB APIs

  

Ahi vamos 😃

function startGame () {
    game.fillStyle = 'brown';
    game.fillRect(100,25,100,100);
    game.clearRect(125,50,50,50);

    game.font = '16px Verdana';
    game.fillStyle = "blue";
    game.fillText('HOLI!', 128, 78);
}

algunos métodos de Canvas que puedes usar para crear y manipular elementos en el canvas:

1. getContext(): Este método se utiliza para obtener el contexto de dibujo del canvas. El contexto de dibujo es un objeto que proporciona métodos y propiedades para dibujar en el canvas. El contexto se puede obtener en dos modos, 2D y 3D, y se puede llamar al método getContext() con el parámetro “2d” o “webgl” para obtener el contexto de dibujo correspondiente.
2. fillRect(): Este método se utiliza para dibujar un rectángulo relleno en el canvas. El método toma cuatro argumentos: la posición x del rectángulo, la posición y del rectángulo, el ancho del rectángulo y la altura del rectángulo.
3. strokeRect(): Este método se utiliza para dibujar un rectángulo con borde en el canvas. El método toma cuatro argumentos: la posición x del rectángulo, la posición y del rectángulo, el ancho del rectángulo y la altura del rectángulo.
4. clearRect(): Este método se utiliza para borrar un área rectangular del canvas. El método toma cuatro argumentos: la posición x del área rectangular, la posición y del área rectangular, el ancho del área rectangular y la altura del área rectangular.
5. beginPath(): Este método se utiliza para comenzar una nueva ruta de dibujo en el canvas. Los métodos moveTo() y lineTo() se utilizan a menudo después de este método para definir la ruta de dibujo.
6. beginPath(): Este método se utiliza para comenzar una nueva ruta de dibujo en el canvas. Los métodos moveTo() y lineTo() se utilizan a menudo después de este método para definir la ruta de dibujo.
7. moveTo(): Este método se utiliza para mover el cursor a una posición especificada en el canvas sin dibujar.
8. lineTo(): Este método se utiliza para dibujar una línea desde la posición actual del cursor hasta una posición especificada en el canvas.
9. stroke(): Este método se utiliza para dibujar la ruta de dibujo en el canvas con un borde.
10. fill(): Este método se utiliza para dibujar la ruta de dibujo en el canvas rellenando la forma.
11. arc(): Este método se utiliza para dibujar un arco en el canvas. El método toma seis argumentos: la posición x del centro del arco, la posición y del centro del arco, el radio del arco, el ángulo inicial del arco, el ángulo final del arco y la dirección del arco (opcional).

Si a alguien le sirven mis apuntes:

    /* === Métodos del canvas === */
 	 game.fillRect(0,0,100,100); /* Lugar donde inicia el trazo. */
   game.clearRect(0,0,50,50); /*  Sirve como borrador para alguna parte del canvas. */
   game.font = "25px Verdana"; /* Tamaño que tendrá el texto del fillText y tipo de fuente.*/
   game.fillStyle = "Purple"; /* Nos permite añadir estilos CSS al fillText.*/
   game.textAlign = "end"; /* Posición del texto, donde comienza o donde termina respecto a la posición X y Y. */
   game.fillText("Uriel", 70, 70); /* Nos permite insertar texto dentro del canvas.*/

Les comparto mis apuntes. 😄

CanvasRenderingContext2D.fillRect()

Con fillRect() podemos crear un cuadrado que parte desde un punto $X_i$ e $Y_i$, además, le podemos agregarle un ancho y un alto.

Sintaxis

CanvasRenderingContext2D.fillRect(Xi, Yi, WIDTH, HEIGHT);

CanvasRenderingContext2D.clearRect()

Contienen los mismos parámetros de fillRect(), solo que clearRect() se encarga de borrar lo que hayamos dibujado con fillRect().

Sintaxis

CanvasRenderingContext2D.clearRect(Xi, Yi, WIDTH, HEIGHT);

CanvasRenderingContext2D.fillText()

Con fillText() nos permite insertar un texto y para esto tenemos que darles las coordenadas de donde queremos insertar dicho texto.

Sintaxis

CanvasRenderingContext2D.fillText('Text', X, Y, maxWidth?);

CanvasRenderingContext2D.fillStyle

Con fillStyle, lo tratamos como un valor, nos permite agregarle estilis a nuestro texto.

Value

One of the following:

• A string parsed as CSS <color> value.
• A CanvasGradient object (a linear or radial gradient).
• A CanvasPattern object (a repeating image).

Sintaxis

CanvasRenderingContext2D.fillStyle = value;

CanvasRenderingContext2D.font

Con font, lo tratamos como un valor, nos permite definir la funte de nuestro texto.

Sintaxis

CanvasRenderingContext2D.font **= '**font-size family-font font-variant font-weight**';**

Más sobre CanvasRenderingContext2D.font.

CanvasRenderingContext2D.textAlign

Nos permite alinear el texto, teniendo como referencia a los ejes X e Y.

Value

Possible values:

"left"The text is left-aligned.

"right"The text is right-aligned.

"center"The text is centered.

"start"The text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales).

"end"The text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales).

The default value is "start".
Imagen de @Guadalupe Monge Barale en Platzi.

Sintaxis

[CanvasRenderingContext2D.textAlign](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) = value;

Esto me recuerda que dejé abandonado el proyecto de la pizarra del curso básico de programación XD. Luego de aprender más sobre canvas en este curso seguro tendré mejores ideas para agregarle a ese otro proyecto.

Ojito que antes de dibujar cualquier cosa en el canvas, se tienen que agregar los estilos correspondientes…sino no va a reconocer la figura los estilos.

NO estoy seguro, pero al parecer también importa el orden de los estilos, según el orden en que estén:

Resultado 1:

function startGame() {
    game.fillStyle = 'purple';
    game.fillRect(0,0,100,100);
    
    
    game.font = '30px Verdana'
    game.fillStyle = "green"
    game.textAlign = 'start';
    game.fillText('Platzi', 100, 30);
}

Resultado 2

function startGame() {
    game.fillStyle = "green"
    game.fillRect(0,0,100,100);
    
    
    game.font = '30px Verdana'
    game.fillStyle = 'purple';
    game.textAlign = 'start';
    game.fillText('Platzi', 100, 30);
}

Tambien se sobreescriben

Resultado 3:

function startGame() {
    game.fillRect(0,0,100,100);
    // vuelve al negro por default
    
    game.font = '30px Verdana'
    game.fillStyle = 'purple';
    game.fillStyle = "green"
    game.textAlign = 'start';
    game.fillText('Platzi', 100, 30);
}

Resumen de la clase:
Lección 2: ¿Qué es canvas en Javascript?
1 ) en el archivo game.js:
const canvas = document.querySelector(’#gmae’);
const game = canvas.getContext(‘2d’);

1. en game.js creamos una función después de las líneas relativas al canvas:

function startGame() {
//game.&*()
}

1. Metemos la función anterior dentro de un addEventListener:

window.addEvenListener(‘load’, startGame);

1. Seguimos escribiendo dentro nuestra función startGame:
   function startGame (){
   //game.fillRect(0,50,100,100);
   //game.clearRect(50,50,50,50);
   //game.clearRect();
   //game.clearRect(0,0,50,50);
   game.font ='25px Verdana’
   game.fillStyle = 'purple’
   game.textAlign = 'centerd’
   game.fillText(‘Platzi’,25,25)

Por si quieren agregar una imagen

const canvas = document.querySelector('#game');
const game = canvas.getContext('2d');
const pjIcon = new Image(); //Declaro la imagen

pjIcon.src = 'icons/isaac.png'  //Url Imagen
window.addEventListener('load', startGame);

function startGame(){
    
    game.drawImage(pjIcon, 10,10,100,100) //"Dibujo" imagen en canva
}

Método clearRect( )

• Aprende sobre este método de la interface Canvas Rendering Context 2D:
  

  

• Resumen de WEB APIs

  

Método fillText( )

Hola, hice un pequeño resumen acerca de Canvas, espero que les sea útil:

https://www.notion.so/Canvas-78616c26a864480d8bf3385076dad547

Por si no les aparece el autocompletado. Yo uso el “type cast” :

const canvas = /** @type {HTMLCanvasElement} */ (document.querySelector('#game'));>

and then enjoy basic Intellisense:

Lección 2: ¿Qué es canvas en Javascript? 1 ) en el archivo game.js: const canvas = document.querySelector('#game'); const game = canvas.getContext('2d'); 2) en game.js creamos una función después de las líneas relativas al canvas: function startGame() { //game.&*() } 3) Metemos la función anterior dentro de un addEventListener: window.addEvenListener('load', startGame); 4) Seguimos escribiendo dentro nuestra función startGame: function startGame (){ //game.fillRect(0,50,100,100); //game.clearRect(50,50,50,50

function startGame() {
    game.fillRect(0,0,100,100);
    game.clearRect(0,0,50,50);
    game.clearRect(50,0,50,50);
    game.clearRect(0,50,50,50);
    game.clearRect(50,50,50,50);
}

CODIGO

function startGame () {
    game.fillRect(50,25,200,100);
    game.clearRect(100,50,100,50);
    game.font = '16px Verdana';
    //game.fillStyle = 'purple';
    game.textAlign = 'center';
    game.fillText('Anderson', 150,80);```

Buena clase

tienes que repoducir el video en 0.85x