HTML 5 Canvas Samples « Web Development « Blog

Here are some HTML 5 Canvas snippets that would give you an idea on graphics in canvas.

function drawcircle()
{
  var ctx = GEBI('canvas1').getContext("2d");
  ctx.strokeStyle = "#AA0000";
  ctx.lineWidth = 5;
  ctx.beginPath();
  ctx.arc(65, 65, 50, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.stroke();
}

Rectangle show code

function drawRectangle()
{
  var ctx = GEBI('canvas2').getContext("2d");
  ctx.fillStyle = "#AA0000";
  ctx.fillRect(15,15,100,100);
  ctx.clearRect(20,20,90,90);
}

Lines show code

function drawlines()
{
  var ctx = GEBI('canvas3').getContext("2d");
  ctx.strokeStyle = "#AA0000";
   for (i=1;i<=12;i+=2)
   {
       ctx.lineWidth = i;
       ctx.beginPath();
       ctx.moveTo(i*10,10);
       ctx.lineTo(i*10,120);
       ctx.stroke();
    }
}

Spiral using lines show code

function drawspiral()
{
  var ctx = GEBI('canvas4').getContext("2d");
  ctx.strokeStyle = "#AA0000";
  ctx.lineWidth = 1;
  
  var cx = 65;
  var cy = 65;
  ctx.moveTo(cx, cy);
  
  var increment = (2*Math.PI)/60;
  var theta = increment;
  while(theta<20*Math.PI)
  {
     var x = cx + theta * Math.cos(theta); 
     var y = cy + theta * Math.sin(theta); 
     ctx.lineTo(x, y);
     theta = theta + increment;
  }
  ctx.stroke();
}

Pie chart using arcs,lines and text show code

function drawpie()
{
  var ctx = GEBI('canvas5').getContext("2d");
  ctx.lineWidth = 5;
  
  var pieValues=new Array(27,23,20,10,17,3);
  var recty=30;
  var curent = 0;
  for (i=0;i

Mesh with timer show code

var meshtp=5; //set the initial top of mesh
var meshlft=5; //set initial left of mesh
var meshhor=0; //set horizontal direction from left to right
var meshver=0; //set vertical direction from top to bottom
function drawmesh()
{
  var ctx = GEBI('canvas6').getContext("2d");
  
  if(meshtp==5 && meshlft==5)
  {
    ctx.clearRect(0, 0, 250, 700);
  }
  
  if(meshtp<10){ meshver=0; }
  if(meshtp>190) { meshver=1; }
  if(meshlft<10) { meshhor=0; }
  if(meshlft>240) { meshhor=1; }
  
  meshlft=meshlft+((meshhor==0)?5:-5);
  meshtp=meshtp+((meshver==0)?5:-5);
  
  if(meshtp==5 && meshlft>235)
  {
    meshtp=5;
    meshlft=5;
    //set the timer to invoke same function after 2 seconds
    setTimeout(drawmesh,2000);
  }
  else
  {
    ctx.fillStyle = "#254";
    ctx.beginPath();
    ctx.arc(meshlft, meshtp, 4, 0, Math.PI*2, true); 
    ctx.closePath();
    ctx.fill();
    
    //set the timer to invoke same function after 15 milliseconds
    setTimeout(drawmesh,15);
  }
}

BounceBoll with timer show code

var tp=10; //set the initial top of boll
var lft=10; //set initial left of boll
var hor=0; //set horizontal direction from left to right
var ver=0; //set vertical direction from top to bottom
function drawboll()
{
  var ctx = GEBI('canvas7').getContext("2d");
  ctx.clearRect(0, 0, 200, 700);
  
  if(tp<10){ ver=0; }
  if(tp>190) { ver=1; }
  if(lft<10) { hor=0; }
  if(lft>190) { hor=1; }
  
  lft=lft+((hor==0)?5.5:-5.5);
  tp=tp+((ver==0)?5:-5);
  
  ctx.fillStyle = "#AA0000";
  ctx.beginPath();
  ctx.arc(lft, tp, 5, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();
  
  //set the timer to invoke same function after 25 milliseconds
  setTimeout(drawboll,25);
}