¿Qué es canvas en JavaScript?

Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Contenido del curso

Introducción

1
Programemos un juego con JavaScript
17:13 min

Canvas

Mapa del juego

Movimientos del jugador

Colisiones

Bonus: adictividad

Deploy

Próximos pasos

Cursos Empresas Blog Live Conf Eventos Precios

0:0018:37

¿Qué es canvas en JavaScript?

Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Clase 2 de 24

Clase 2 / 24

Comentarios (33)33 comentarios

Angel David Velasco Bonifaz

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

Gilberto Santamaria

Importante aporte !

Marcelo Garro

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

Federico Maidana

Buen dato

Oscar Israel Román Quispe

Oscar Israel Román Quispe

Exceelente, me funcionó, ¡muchas gracias!

Gualberto Montiel

Aqui algunos metodos de HTML5 Canvas:

!Metodos Canvas

Joselyne Ivanny Coello Moreira

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

Juan Pablo Soto Velasco

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

Raúl Adolfo Sánchez Rodríguez

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

Federico Ivan Llano

Federico Ivan Llano

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

¿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

Juan David Reyes

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

Yordy Leonardo Almonte Ruiz

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

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

Josue Cerron Tuesta

Josue Cerron Tuesta

Con canvas se pueden hacer muchas cosas!

Javier Núñez

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

Para este caso me gusta más utilizar

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

Federico Maidana

Genial, no conocía esta propiedad

----- ----

Lo de textAlign ta interesante el como ajusta el texto

Raúl Adolfo Sánchez Rodríguez

Método fillRect( )

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

Fabian Camilo Huertas Suarez

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 Rodríguez

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

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

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.

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 .

****

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

 = value;

César Augusto Cortés Labrada

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

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

Kevin J. Zea Alvarado

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

Valentin moronta

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

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

Juan Pablo Soto Velasco

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

Gerardo Garduño Rosas

Gerardo Garduño Rosas

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

Ricardo Alfonso Chavez Vilcapoma

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.