Cursos Empresas Blog Live Conf Precios

¿Qué es canvas en JavaScript?

Clase 2 de 24 • Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Clase anteriorSiguiente clase

Angel David Velasco Bonifaz

student•

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)

Gilberto Santamaria

student•

Importante aporte !

Marcelo Garro

student•

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.

Federico Maidana

student•

Buen dato

Oscar Israel Román Quispe

student•

Exceelente, me funcionó, ¡muchas gracias!

Gualberto Montiel

student•

Aqui algunos metodos de HTML5 Canvas:

Joselyne Ivanny Coello Moreira

student•

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

Juan Pablo Soto Velasco

student•

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

Raúl Adolfo Sánchez Rodríguez

student•

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

Federico Ivan Llano

student•

Se confundio en eso? porque para mi siempre el eje horizontal fue x y vertical el Y. Al principio siempre me lo confundia, pero recuerdo que en Unity 2d se usa para hacer saltar un personaje modificando el eje Y.

Juan David Reyes

student•

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

Juan David Reyes

student•

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
fillStyle

Su sintaxis es así, es un poco diferente a las otras por qué no son un método.

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';

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';

Yordy Leonardo Almonte Ruiz

student•

ufff, buenisimo tu aporte hermano, estas notas siempre me ayudan muchisimo a la hora de centralizar el tema aprendido en la clase actual ya sea para dejar notas, hacer commits, sintetizar info, en fin lo que sea que te ayude a crear un resumen de lo que trato la clase

Eduardo Nila

student•

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

Josue Cerron Tuesta

student•

Con canvas se pueden hacer muchas cosas!

Javier Núñez

student•

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

Jorge Méndez Ortega

student•

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 
    }
};

Federico Maidana

student•

Genial, no conocía esta propiedad

Alejandro Ramos

student•

Lo de textAlign ta interesante el como ajusta el texto

Raúl Adolfo Sánchez Rodríguez

student•

Método fillRect( )

Aprende sobre este método de la interface Canvas Rendering Context 2D:
Resumen de WEB APIs

Fabian Camilo Huertas Suarez

student•

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

Luis Miguel Rodriguez

student•

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

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.
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.
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.
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.
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.
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.
moveTo(): Este método se utiliza para mover el cursor a una posición especificada en el canvas sin dibujar.
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.
stroke(): Este método se utiliza para dibujar la ruta de dibujo en el canvas con un borde.
fill(): Este método se utiliza para dibujar la ruta de dibujo en el canvas rellenando la forma.
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).

Uriel Solis Salinas

student•

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.*/

Axel Enrique Galeed Gutierrez

student•

Les comparto mis apuntes. :D

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.

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.

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;

César Augusto Cortés Labrada

student•

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.

Valentin moronta

student•

Hola tengo un problema con el getContext ya me me salta un error: Uncaught TypeError: Cannot read properties of null (reading 'getContext') / este para ser mas expesifico, alguien sabe como resolverlo??

Kevin J. Zea Alvarado

student•

Hola, Valentin. 👋 Ese error suele aparecer porque no se está llamando correctamente al id del elemento. Asegúrate de que sean exactamente el mismo, incluyendo mayúsculas y minúsculas.

Si sigue sin funcionar, comparte tu código HTML y JavaScript.

Valentin moronta

student•

Hola, nono aun no funciona no era el id ya lo mire, ahi te dejo el codigo:

<div class="game-container">
        <!-- canvas de iteracion -->
        <canvas id="game"></canvas>
        <!-- botones -->
        <div class="btns"> 
        <button id="up">Arriba</button>
        <button id="left">Izquierda</button>
        <button id="right">Derecha</button>
        <button id="down">Abajo</button>
        </div>
        <!-- texto extra del juego -->
        <div class="messages">
            <p>Parrrafo de ejemplo</p>
        </div>
    </div>
 
Y por aca el JS

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

window.addEventListener('load',starGame);

function starGame() {
    game.fillRect(0,0,100,100);
}

Gerardo Garduño Rosas

student•

yo tengo un problema cuando cargo dentro de la pagina el getContext me marca any y me manda un error en el navegador

Connot read properties of hull ( reading getContext)

Juan Pablo Soto Velasco

student•

Qué raro, ¿podrías compartir tu código para ver qué podría ser?

Gerardo Garduño Rosas

student•

const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d');

Ricardo Alfonso Chavez Vilcapoma

student•

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.