One of the goals of HTML5 is to make the web completely independent of plugins such as Silverlight, Flash or java applets. To handle this HTML5 introduced the canvas API to create own graphics in our websites with help of JavaScript. It creates a drawing surface a blank area with in the browser that area is marked of in XY coordinates. In this tutorial i want to explain how to create different shapes using canvas element easily with examples. Lets Start with rectangles

The rectangles are fully supported by the canvas tag and it has three set of properties like stroke, fill, clear. In this sample ex i have created canvas it has blue outline and filled with green background color and inside the canvas i just drawn  the sample shape rectangle and filled with light green. Please look the example
<!DOCTYPE html>
  <meta charset="utf-8" />
  <title>Canvas Tutorial</title>
    body {
      font-family: arial, verdana;
      font-size: 12px;
    canvas {
      border: 2px solid darkblue;
      background-color: lightgreen;
<H1>Basic Example</H1>
  <canvas id="myCanvas">
   Sorry, your browser doesn't support canvas.
    // Get the canvas element and its drawing context.
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    // Draw a simple filled rectangle.
    var edge = 20;
    context.fillStyle = "rgba(0, 0, 255, 0.25)";
 //Another way to define fill style
 //context.fillStyle = "grey";
    context.fillRect(20, 20, 260, 110);


  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai