Untitled

<!DOCTYPE html>

    <head>
        <meta charset="utf-8" />
        <title>Drawing images</title>
        <script>
        function retornarLienzo(x){
                var canvas = document.getElementById(x);
                if(canvas.getContext){
                    var lienzo = canvas.getContext("2d");
                    return lienzo;
                }else{
                    return false;
                }
            }
            function inicio(){
                ini=setInterval(dibujar,20);
            }
            var contador=0;
            var ini;

            function dibujar(){
                var lienzo=retornarLienzo("lienzo1");
                if(lienzo){
                    lienzo.clearRect(0,0,300,300);
                    lienzo.shadowOffsetX=30;
                    lienzo.shadowOffsetY=30;
                    lienzo.shadowBlur=contador;
                    lienzo.shadowColor="rgba(255,0,0,0.5)";
                    lienzo.fillStyle="rgb(255,0,0)";
                    lienzo.fillRect(50,50,200,200);
                    contador++;
                    if(contador==100){
                      clearInterval(ini);
                    }
                   }
                  }
            </script>
    </head>
   <body onload="inicio()">
        <canvas id="lienzo1" width="600" height="600">
            tu navegador no soporta canvas
        </canvas>
    </body>
</html>