BBQQ STUDIO

It’s right below – but IE won’t be able to see it though…

Source Code:


<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById('example');
if (canvas.getContext){
var ctx = canvas.getContext("2d");
var lingrad = ctx.createLinearGradient(0, 0, 0, 100);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.75, '#fff');
lingrad.addColorStop(1, '#eee');
ctx.fillStyle = lingrad;
ctx.fillRect(20, 15, 460, 115);
ctx.lineWidth = 4;
ctx.strokeStyle = "#fff";
ctx.strokeRect(20, 15, 460, 115);

ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.strokeStyle = “rgba(0, 0, 200, 0.5)”;

var facegrad = ctx.createLinearGradient(0, 0, 0, 120);
facegrad.addColorStop(1, ‘#f30′);
facegrad.addColorStop(0.5, ‘#cd0′);
facegrad.addColorStop(0, ‘#69c’);

// ctx.fillStyle = “rgba(200, 80, 80, 0.8)”;
ctx.fillStyle = facegrad;
ctx.fill();
ctx.stroke();
ctx.closePath();

ctx.lineJoin = ’round’;
ctx.lineCap = ’round’;

ctx.beginPath();
ctx.moveTo(200, 25);
ctx.lineTo(250,75);
ctx.lineWidth = 2;
ctx.strokeStyle = “#f00″;
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(250,75);
ctx.lineTo(200, 125);
ctx.lineWidth = 5;
ctx.strokeStyle = “#ddd”;
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(200, 125);
ctx.lineTo(200, 25);
ctx.lineWidth = 10;
ctx.strokeStyle = “rgba(0,0,0,0.6)”;
ctx.stroke();
ctx.closePath();
}
}
</script>
<canvas id=”example” width=”500″ height=”450″>

Kudos to mozilla dev center (https://developer.mozilla.org/en/Canvas_tutorial) for the excellent tutorial and examples.