Es un elemento HTML incorporado en HTML5 que permite la

generacin de grficos dinmicamente por medio del scripting.1

Permite generar grficos estticos y animaciones.

 Internet Explorer (9.0+)

Safari (3.0+)
Firefox (3.0+),
Chrome (3.0+)
Opera (10.0+)
iOS (1.0+)

Android (1.0+)

var canvas
var ctx

= $("#game")[0];
= canvas.getContext("2d");

ctx.fillRect(50, 50, 100, 100);

// Cmo?
ctx.fillRect(A, B, C, D);

ctx.fillRect(50, 50, 100, 100);

// Cmo?
ctx.fillRect(A, B, C, D);
A = eje de las x
B = eje de las y
C = ancho
D = alto

(left)
(top)
(width)
(height)

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 250);
ctx.lineTo(250, 250);
ctx.closePath();

ctx.fill();

ctx.fillStyle = "rgb(255, 0, 0)";

ctx.fillRect(50, 50, 100, 100);

ctx.strokeStyle = "rgb(255, 0, 0)";

ctx.strokeRect(50, 50, 100, 100);

ctx.lineWidth = 20;
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.strokeRect(50, 50, 100, 100);
ctx.lineWidth = 20;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 250);
ctx.lineTo(250, 250);
ctx.closePath();
ctx.stroke();

ctx.fillRect(50, 50, 100, 100);

ctx.clearRect(0, 0, 500, 500);

ctx.fillRect(50, 50, 100, 100);

ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect(200, 50, 100, 100);
// Luego
ctx.clearRect(50, 50, 100, 100);