W3docs
es
Iniciar sesión

Dibujo en Canvas

On this page, you can find useful information about the HTML <canvas> element, as well as to learn to draw with canvas step by step with our code examples.

JavaScript se utiliza para dibujar en el canvas. Lo haremos paso a paso.

1. Buscar el elemento Canvas

Para encontrar el elemento canvas, utiliza el método HTML DOM: getElementById():

Dibujo en Canvas

var canvas=document.getElementById("canvas");

2. Crear un objeto de dibujo

Utiliza el getContext() método para obtener un contexto de dibujo, que proporciona propiedades y métodos:

Dibujo en Canvas

var ctx = canvas.getContext("2d");

3. Dibujar en el elemento Canvas

Ahora puedes dibujar en el canvas. La propiedad fillStyle puede ser un color CSS, un patrón o un degradado.

Dibujo en Canvas

ctx.fillStyle = "#1c87c9";

También puedes utilizar el método fillRect(x, y, width, height) para dibujar un rectángulo relleno en el canvas. Los parámetros especifican las coordenadas x e y de la esquina superior izquierda, seguidas del ancho y el alto:

Dibujo en Canvas

ctx.fillRect(0, 0, 230, 130);

Ejemplo de la etiqueta HTML <canvas>:

Ejemplo de la etiqueta HTML <canvas>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="canvas" width="250" height="150" style="border:1px solid #dddddd;">
      The canvas tag is not supported by your browser.
    </canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#1c87c9";
      ctx.fillRect(0, 0, 230, 130)
    </script>
  </body>
</html>
Pruébalo tú mismo »

Práctica

Práctica

¿Cuáles son los elementos necesarios para dibujar en un canvas HTML?