Canvas draw shapes - Javascript Canvas

Javascript examples for Canvas:Shape

  1. HOME
  2. Javascript
  3. Canvas
  4. Shape

Description

Canvas draw shapes

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){/*w ww. ja  v a  2  s  .c om*/
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var RAF;
    var i=0;
    var j=0;
    function animate() {
      // draw stuff
      ctx.beginPath();
      ctx.fillRect(10*j, 10*i, 10, 10);
      ctx.fillStyle = 'rgb('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')';
      ctx.fill();
      ctx.closePath();
      // update
      j+=1;
      console.log(i+"/"+j);
      if(j>=50){
          i+=1;
          j=0;
          if(i>=50){
              cancelAnimationFrame(RAF);
          }
      }
      // request new frame
      RAF=requestAnimationFrame(function() { animate(); });
    }
    animate();
}); // end $(function(){});

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials