Introducción a Canvas
El elemento HTML <canvas> se usa para dibujar gráficos mediante scripting. Solo es un contenedor para gráficos. Necesitas JavaScript para dibujar los gráficos.
Canvas tiene múltiples métodos para dibujar trazados, círculos, cuadros, texto, así como para agregar imágenes.
Canvas se puede usar para dibujar texto colorido, con o sin animación. Los objetos de Canvas también se pueden animar, lo que significa que pueden moverse.
TIP
Se pueden tener más de un elemento <canvas> en una página HTML.
Canvas es un área rectangular y, de forma predeterminada, no tiene borde ni contenido.
Introducción a Canvas
html
<canvas id="canvas" width="250" height="150"></canvas>DANGER
Usa siempre un atributo id, y un atributo width y height para definir el tamaño del canvas. Usa el atributo style para agregar un borde.
Para dibujar en el canvas, primero debes obtener un contexto de dibujo 2D usando canvas.getContext('2d').
Ejemplo de la etiqueta HTML <canvas>:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvas" width="250" height="150" style="border:1px solid #1c87c9;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
</body>
</html>Ejemplo de la etiqueta HTML <canvas> para dibujar un círculo:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="200" height="200" style="border:1px solid #dddddd;">
HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 60, 0, 2 * Math.PI);
ctx.strokeStyle = '#009299';
ctx.stroke();
</script>
</body>
</html>Ejemplo de la etiqueta HTML <canvas> para dibujar texto:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="350" height="110" style="border:1px solid #dddddd;">
HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.fillStyle = '#262ac7';
ctx.fillText("Canvas Text", 55, 65);
</script>
</body>
</html>Ejemplo de la etiqueta HTML <canvas> para dibujar un degradado lineal:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="140" style="border:1px solid #dddddd;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "#359900");
grd.addColorStop(1, "#ffffff");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 250, 100);
</script>
</body>
</html>Ejemplo de la etiqueta HTML <canvas> para dibujar una línea:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="150" height="150" style="border:1px solid #cccccc;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(150, 150);
ctx.strokeStyle = '#86417d';
ctx.stroke();
</script>
</body>
</html>Ejemplo de la etiqueta HTML <canvas> para dibujar una imagen:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div>
<h2>Original image</h2>
<img id="flower" src="https://images.unsplash.com/photo-1485431142439-206ba3a9383e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="500" height="379" />
</div>
<h2>Draw an image with canvas</h2>
<canvas id="exampleCanvas"></canvas>
<script>
const canvas = document.getElementById('exampleCanvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('flower');
image.addEventListener('load', e => {
ctx.drawImage(image, 80, 80, 350, 200, 10, 10, 150, 100);
});
</script>
</body>
</html>Ejemplo de la etiqueta HTML <canvas> para dibujar un degradado circular:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="260" height="160" style="border:1px solid #cdcdcd;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(150, 75, 10, 115, 90, 150);
grd.addColorStop(0, "purple");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 220, 120);
</script>
</body>
</html>Practice
What are the characteristics and usage of the HTML Canvas?