Canvas Examples

• label_outlineDraw a Line

  library_books<canvas id="canvas1" width="200" height="100" style="border:1px solid grey;"></canvas>
  <script>
   let c = document.getElementById("canvas1");
   let ctx = c.getContext("2d");
   ctx.moveTo(20,50);
   ctx.lineTo(180,50);
   ctx.stroke();
  </script>

  OUTPUT:
  
• label_outlineDraw a Rectangle

  library_books<canvas id="canvas2" width="200" height="100" style="border:1px solid grey;"></canvas>
  <script>
   let c = document.getElementById("canvas2");
   let ctx = c.getContext("2d");
   ctx.strokeRect(30,15,140,70);
  </script>

  OUTPUT:
  
• label_outlineDraw a Circle

  library_books<canvas id="canvas3" width="200" height="100" style="border:1px solid grey;"></canvas>
  <script>
   let c = document.getElementById("canvas3");
   let ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.arc(95,50,40,0,Math.PI*2);
   ctx.stroke(); 
  </script>

  OUTPUT:
  
• label_outlineDraw an Arc

  library_books<canvas id="canvas4" width="200" height="100" style="border:1px solid grey;"></canvas>
  <script>
   let c = document.getElementById("canvas4");
   let ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.moveTo(140,40);
   ctx.arc(95,40,45,0,Math.PI,false);
   ctx.stroke(); 
  </script>

  OUTPUT:
  
• label_outlineDraw a Text

  library_books<canvas id="canvas5" width="200" height="100" style="border:1px solid grey;"></canvas>
  <script>
   let c = document.getElementById("canvas5");
   let ctx = c.getContext("2d");
   ctx.font = "25px Arial";
   ctx.fillText("Hello World !",30,60); 
  </script>

  OUTPUT:
  
• label_outlineDraw a Stroke Text

  library_books<canvas id="canvas6" width="200" height="100" style="border:1px solid grey;">
  </canvas>
  <script>
   let c = document.getElementById("canvas6");
   let ctx = c.getContext("2d");
   ctx.font = "35px chiller";
   ctx.strokeText("Hello World !",30,60); 
  </script>

  OUTPUT:
  
• label_outlineDraw a Linear Gradient

  library_books<canvas id="canvas7" width="200" height="100" style="border:1px solid grey;"></canvas>
  <script>
   let c = document.getElementById("canvas7");
   let ctx = c.getContext("2d");
   // Create gradient
   let grd = ctx.createLinearGradient(0,0,200,0);
   grd.addColorStop(0,"teal");
   grd.addColorStop(1,"white");
   // Fill with gradient
   ctx.fillStyle = grd;
   ctx.fillRect(10,10,180,80);
  </script>

  OUTPUT:
  
• label_outlineDraw a Circular Gradient

  library_books<canvas id="canvas8" width="200" height="100" style="border:1px solid grey;"></canvas>
  <script>
   var c = document.getElementById("canvas8");
   var ctx = c.getContext("2d");
   // Create gradient
   var grd = ctx.createRadialGradient(75,50,20,100,50,80);
   grd.addColorStop(0,"red");
   grd.addColorStop(1,"white");
   // Fill with gradient
   ctx.fillStyle = grd;
   ctx.fillRect(10,10,180,80);
  </script>

  OUTPUT:
  
• label_outlineDraw an Image

  library_books<canvas id="canvas9" width="230" height="200" style="border:1px solid grey;"></canvas>
  <img src="images/imageFile.png" id="img1" style="height:100px">
  <script>
   var c = document.getElementById("canvas9");
   var ctx = c.getContext("2d");
   var img = document.getElementById("img1");
   ctx.drawImage(img,5,5);
  </script>

  OUTPUT: