Ejemplo HTML5: insertar canvas y svg

Ejemplo de código fuente en HTML5 donde se ve el funcionamiento y diferencia entre canvas y svg.

Descripción del ejemplo

El canvas será con un círculo de color azul, y el svg será con un círculo de color rojo.

Código

Código canvas

Éste sería el código para el canvas:

<canvas id="circulo" width="120" height="120">
  Tu navegador no soporta canvas
</canvas>

Y éste sería el código del javascript del canvas:

var c = document.getElementById("circulo");
var cxt = c.getContext("2d");

cxt.fillStyle = "blue";
cxt.beginPath();
cxt.arc(60, 60, 50, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();

Código svg

<svg width="200" height="200">
    <circle cx="100" cy="100" r="72" style="fill:rgb(0,0,255)"/>
</svg>

Demo del ejemplo

VER DEMO

Descargar ejemplo