Canvas HTML5

¿Que es Canvas HTML?

El elemento <canvas> es usado para dibujar gráficos, sobre la marcha, a través JavaScript. El elemento <canvas> es solo el contenedor para gráficos. Debe usarse JavaScript para dibujar los gráficos. Un lienzo (canvas) tiene muchos métodos para dibujar trazados, cajas, círculos, texto y agregar imágenes.

Ejemplos Canvas

Un canvas es una área rectangular en una página HTML. Por defecto, un canvas no tiene borde y ni contenido. Siempre se especifica el atributo id (para referirlo a un script), y los atributos width y height para definir el tamaño del canvas.

<canvas id="micanvas" width="200" height="100" style="border: thin solid gray;">
</canvas>

Dibujar una línea:

<script>
  var c = document.getElementById("micanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(200,100);
  ctx.stroken();
</script>

Dibujar un círculo:

<script>
  var c = document.getElementById("micanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95.50,40,0,2 * Math.PI);
  ctx.stroke();
</script>

Dibujar un Texto:

<script>
  var c = document.getElementById("micanvas");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText("Hola mundo",10,50);
</script>

Dibujar un Texto Trazado:

<script>
  var c = document.getElementById("micanvas");
  var ctx = getContext("2d");
  ctx.font = "30px Arial";
  ctx.strokeText("Hola mundo",10,50);
</script>

Dibujar un Degradado Círcular:

<script>
  var c = document.getElementById("micanvas");
  var ctx = c.getContex("2d");
  // Crear el degrado
  var grd = ctx.createRadialGradient(75,50,5,90,60,100);
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"white");
  // Llenar degrado
  ctx.fillStyle = grd;
  ctx.fillRect(10,10,150,80);
</script>

Dibujar una Imagen:

<script>
  var c = document.getElementById("micanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img,10,10);
</script>