Drawing custom shapes in HTML5 canvas

You can draw any custom shape by using rectangles, adding line segments, curves, or arcs, and optionally closing the path with stroke and different fill styles.

Consider an example to draw a house(see the Figure 1) that contains the sequence of the line paths and rectangle. You can see in the Figure 1, the door of the house is rectangle and rest of all are the connected lines with close path. For the roof of the house program use the red color fill style.

Use the following code to draw the house.

 var ctx;
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              ctx = canvas.getContext("2d");
              ctx.moveTo(100, 25);
              ctx.lineWidth = 2;
              ctx.lineTo(300, 25);
              ctx.lineTo(325, 100);
              ctx.lineTo(150, 100);
              ctx.closePath();
              ctx.fillStyle = "#C81E1E";
              ctx.fill();
 
              ctx.moveTo(100, 25);
              ctx.lineTo(25, 100)
              ctx.moveTo(30, 95);
              ctx.lineTo(30, 200);
              ctx.lineTo(150, 200);
              ctx.stroke();
 
              ctx.moveTo(150, 100);
              ctx.lineTo(150, 200);
              ctx.lineTo(325, 190);
              ctx.lineTo(325, 100);
              ctx.closePath();
              ctx.stroke();
 
              ctx.fillStyle = "#91913C";
              ctx.fillRect(68, 125, 40, 75);
          }

As another example, consider a smiley face that contains some circles and arcs. You should see How to draw a smiley face in HTML5.