aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

En Carsonified.com nos muestran un interesante tutorial con el que iniciarnos en el uso de <canvas /> mediante Javascript.

// Comprobamos que <canvas /> esté disponible
if(drawingCanvas && drawingCanvas.getContext) {
 // Inicializamos el lienzo 2D
 var context = drawingCanvas.getContext('2d');

// Creamos la cara amarilla
 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFF00";
 context.beginPath();
 context.arc(100,100,50,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 // Añadimos 2 ojos verdes
 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFFFF";
 context.beginPath();
 context.arc(80,80,8,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 context.fillStyle = "#009966";
 context.beginPath();
 context.arc(80,80,5,0,Math.PI*2,true);
 context.closePath();
 context.fill();

 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFFFF";
 context.beginPath();
 context.arc(120,80,8,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 context.fillStyle = "#009966";
 context.beginPath();
 context.arc(120,80,5,0,Math.PI*2,true);
 context.closePath();
 context.fill();

 // Creamos una nariz con firma de diamante
 context.fillStyle = "#000000";
 context.beginPath();
 context.moveTo(93,100);
 context.lineTo(100,93);
 context.lineTo(107,100);
 context.lineTo(100,107);
 context.closePath();
 context.fill();

 // Añadimos la sonrisa                   
 context.strokeStyle = "#000000";
 context.beginPath();
 context.moveTo(70,110);
 context.quadraticCurveTo(100,150,130,110);
 context.quadraticCurveTo(100,150,70,110);                
 context.closePath();
 context.stroke();
}

Este código, nos permite generar la cara amarilla que vemos en el “Hello World” que vemos debajo:

(Ver Imagen)

Mucho código pero muchas posibilidades.