function draw(){
  var canvas=document.getElementById("canvas");
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext("2d");
  ctx.fillStyle="rgb(200,0,0)";
  ctx.fillRect(10,10,55,50);
  ctx.fillStyle="rgba(0,0,200,0.5)";
  ctx.fillRect(30,30,55,50);}
function draw1(){
  var canvas=document.getElementById("canvas1");
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext("2d");
  ctx.beginPath(); // Filled triangle
  ctx.moveTo(25,25);ctx.lineTo(105,25);
  ctx.lineTo(25,105);ctx.fill();
  ctx.beginPath(); // Stroked triangle
  ctx.moveTo(125,125);ctx.lineTo(125,45);
  ctx.lineTo(45,125);ctx.closePath();ctx.stroke();}
function draw2(){
  var canvas=document.getElementById("canvas2");
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext("2d");
  ctx.beginPath();ctx.arc(75,75,50,0,Math.PI*2,true); // Face
  ctx.moveTo(110,75);ctx.arc(75,75,35,0,Math.PI,false); // Mouth
  ctx.moveTo(65,65);ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
  ctx.moveTo(95,65);ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
  ctx.stroke();}
function draw3(){
  var canvas=document.getElementById("canvas3");
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext("2d");
  for(i=0;i<4;i++){
    for(j=0;j<3;j++){
      ctx.beginPath();
      var x=25+j*50;var y=25+i*50;
      var radius=20;var sAngle=0;
      var eAngle=Math.PI+(Math.PI*j)/2;
      var rotate=i%2===0?false:true;
      ctx.arc(x,y,radius,sAngle,eAngle,rotate);
      if(i>1){ctx.fill();}else{ctx.stroke();}
  } } }
function draw4(){ // Bezier curves example
  var canvas=document.getElementById("canvas4");
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext("2d");
  ctx.beginPath();ctx.moveTo(75,40);
  ctx.bezierCurveTo(75,37,70,25,50,25);
  ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
  ctx.bezierCurveTo(20,80,40,102,75,120);
  ctx.bezierCurveTo(110,102,130,80,130,62.5);
  ctx.bezierCurveTo(130,62.5,130,25,100,25);
  ctx.bezierCurveTo(85,25,75,37,75,40);ctx.fill();}
function draw5(){
  var canvas=document.getElementById('canvas5');
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext('2d');
  var lingrad=ctx.createLinearGradient(0,0,0,150);
  lingrad.addColorStop(0,'#00ABEB');
  lingrad.addColorStop(0.5,'#fff');
  lingrad.addColorStop(0.5,'#26C000');
  lingrad.addColorStop(1,'#fff');
  var lingrad2=ctx.createLinearGradient(0,50,0,95);
  lingrad2.addColorStop(0.5,'#000');
  lingrad2.addColorStop(1,'rgba(0,0,0,0)');
  ctx.fillStyle=lingrad;ctx.strokeStyle=lingrad2;
  ctx.fillRect(10,10,130,130);ctx.strokeRect(50,50,50,50);}
function draw6(){ //images example
  var canvas=document.getElementById("canvas6");
  if(!canvas.getContext){return;}
    var ctx=canvas.getContext("2d");
    var img=new Image();
    img.onload=function(){ctx.drawImage(img,0,0);};
    img.src='images/tpot.jpg';}
function drawText(ctxt,font,style,x,y,text){
  ctxt.font=font;ctxt.fillStyle=style;ctxt.fillText(text,x,y);}
function draw7(){
  var canvas=document.getElementById("canvas7");
  if(!canvas.getContext){return;}
  ctx=canvas.getContext('2d');
  drawText(ctx,'16pt Times New Roman','rgba(0,0,255,0.5)',3,30,'16pt Times');
  drawText(ctx,'14pt Verdana','green',3,50,'14pt Verdana');
  drawText(ctx,'12pt Times New Roman','black',3,70,'12pt Times');
  ctx.shadowOffsetX=2;ctx.shadowOffsetY=2;
  ctx.shadowBlur=2;ctx.shadowColor="rgba(0,0,0,0.5)";
  drawText(ctx,'12pt Times New Roman','Black',3,90,'with Shadow');
  }