Untitled


<html>
  <head>
    <title>A canvas fillRect, strokeRect and clearRect example</title>
    <script type="text/javascript">
      var x = 50;
      var y = 0;
      var incX = 2;
      var incY = 2;
      var ancho = 30;
      var alto = 30;
      function drawShape(){
        var canvas = document.getElementById('tutorial');
          var ctx = canvas.getContext('2d');
          ctx.clearRect(0,0,150,150);
          ctx.fillRect(x,y,ancho,alto);
          x += incX;
          y += incY;

          if(x>120 || x<=0){
            incX*=-1;
          }
          if(y>120 || y<=0){
            incY*=-1;
          }

      }
      setInterval(drawShape,30);

    </script>
    <style type="text/css">
      body { margin: 20px; font-family: arial,verdana,helvetica;}
      h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
      pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
    </style>
  </head>
  <body onload="drawShape();">
      <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>