Tenemos la etiqueta <canvas> para dibujar gráficos, en este caso <canvas> solo crea un lienzo para dibujar dentro de ella de manera similar que <svg>, pero la diferencia está en que el dibujo lo haremos mediante un script de JavaScript.
Etiqueta <canvas>
La etiqueta <canvas> puede ser usado como cualquier otro elemento de HTML, creará un linezo en blanco para poder dibujar con un script.
La esquina superior derecha del lienzo es el punto origen (0,0), al igual que en SVG, podemos establecer el alto y ancho mediante los atributos que ya conocemos (width y height).
Ejemplo de canvas HTML5
Para que no te quedes con la curiosidad, aquí tienes un pequeño y simple ejemplo de código Javascript, dibujando un rectángulo sobre Canvas.
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<canvas id="micanvas" width="400" height="300">
</canvas>
<script>
var canvas=document.getElementById("micanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle ="red";
ctx.fillRect (50, 50, 200, 100);
</script>
</body>
</html>
El script indica que se dibujará un rectángulo en el punto (50,50) con un ancho de 200 y altura de 100, el color de relleno sera rojo y el dibujo es en 2d.
Observa que el la etiqueta <canvas> llama mediante el atributo id=»micanvas» al dibujo que será mostrado en dicho lienzo. Por otro lado el dibujo en Javascript esta identificado con el mismo id.
En canvas se pueden crear gráficos desde simple lineas hasta complejas imágenes, darles animación y más. El punto es tener cocimientos, al menos básicos de Javascript para poder dibujar sobre Canvas.