<!DOCTYPE html>
<html>
<head>
<title>HTML5 - CANVAS I</title>
<script type="text/javascript">
<!--
function cargador()
{
var lienzo = document.getElementById('lienzo') /* aqui se pone el id del canvas */
var lienzo1 = lienzo.getContext('2d') /* aqui se pone 2d xq vamos a dibujar rectangulos en 2d */
lienzo1.fillStyle = "rgba(0,0,200,1)"; /* rgba(r,g,b,A) / A esta en [0,1], A factor de visibilidad) */
lienzo1.fillRect(20,20,150,100); /* fillRect(x,y,w,h) */
lienzo1.fillStyle = "rgba(80,250,180,0.5)"; /* aquí A=0.5 osea el 50% */
lienzo1.fillRect(130,90,30,80);
lienzo1.fillStyle = "rgba(240,150,80,0.8)"; /* aquí A=0.8 osea el 80% */
lienzo1.fillRect(150,100,30,80);
}
// -->
</script>
</head>
<body onload="cargador()">
<h1>Ejem Lienzo I</h1>
<!-- El tag canvas con su id -->
<canvas id="lienzo" width="600" height="300">
</canvas>
<hr />
Código: <a href="http://bitbin.it/pkYwoWrd" target="_blank">http://bitbin.it/pkYwoWrd</a>
</body>
</html>
