Draw Shapes With HTML5 Canvas

Introduction

In this article, we see the basic shapes with HTML5 Canvas. We will learn how to draw shapes with HTML5 Canvas. The canvas element is just like any other block-level element on a web page, consisting of height and width definitions. By default, the height of a canvas element is set to 150 pixels, and the width is set to 300 pixels. We can create many shapes like rectangle, circle, squares, cone, and other custom shapes. HTML5 provides us many elements to create different shapes like Canvas curves and Canvas paths.

In this article, we are trying to create some basic shapes of the HTML5 Canvas.

First, we define the Canvas in the body tag on which we create shapes.

<body>
<canvas id="landscape" width="800" height="350"></canvas>
<canvas id="landscape1" width="800" height="150"></canvas>
</body>

Here we define some JavaScript code to create shapes: Code to create a Circle shape with a HTML5 Canvas:

ctx.fillStyle = "rgba(255, 150, 255, 255)";
ctx.beginPath();
ctx.arc(50, 50, 25, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

Then, we create a star shape with HTML5 Canvas:

ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(107.8, 0.0);
ctx.lineTo(141.2, 67.5);
ctx.lineTo(215.7, 78.3);
ctx.lineTo(161.8, 130.9);
ctx.lineTo(174.5, 205.1);
ctx.lineTo(107.8, 170.1);
ctx.lineTo(41.2, 205.1);
ctx.lineTo(53.9, 130.9);
ctx.lineTo(0.0, 78.3);
ctx.lineTo(74.5, 67.5);
ctx.lineTo(107.8, 0.0);
ctx.closePath();
ctx.fill();

Then, we create a Rectangle shape with HTML5 Canvas:

ctx.fillStyle = "green";
ctx.beginPath();
ctx.moveTo(0, 250);
ctx.lineTo(500, 250);
ctx.lineTo(500, 300);
ctx.lineTo(0, 300);
ctx.lineTo(0, 300);
ctx.fill();
ctx.closePath();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(0, 350);
ctx.lineTo(500, 250);
ctx.lineTo(500, 300);
ctx.lineTo(0, 300);
ctx.lineTo(0, 300);
ctx.fill();
ctx.closePath();

Then, we create a Mountain shape in the form of a cone with HTML5 Canvas:

ctx.fillStyle = "#67ff30";
ctx.beginPath();
ctx.moveTo(150, 250);
ctx.lineTo(300, 20);
ctx.lineTo(450, 250);
ctx.lineTo(150, 250);
ctx.fill();
ctx.closePath();
ctx.fillStyle = "Brown";
ctx.beginPath();
ctx.moveTo(400, 250);
ctx.lineTo(450, 80);
ctx.lineTo(600, 250);
ctx.lineTo(400, 250);
ctx.fill();
ctx.closePath();
ctx.beginPath();

Then, we create a shape like a cloud with the HTML5 Canvas:

ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();
ctx.beginPath();

Here is the Complete Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript">
window.onload = function () {
var landscape_canvas = document.getElementById("landscape");
var ctx = landscape_canvas.getContext("2d");
ctx.fillStyle = "Blue";
ctx.fillRect(0, 0, 800, 850);
// Circle
ctx.fillStyle = "rgba(255, 150, 255, 255)";
ctx.beginPath();
ctx.arc(50, 50, 25, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
// Star
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(107.8, 0.0);
ctx.lineTo(141.2, 67.5);
ctx.lineTo(215.7, 78.3);
ctx.lineTo(161.8, 130.9);
ctx.lineTo(174.5, 205.1);
ctx.lineTo(107.8, 170.1);
ctx.lineTo(41.2, 205.1);
ctx.lineTo(53.9, 130.9);
ctx.lineTo(0.0, 78.3);
ctx.lineTo(74.5, 67.5);
ctx.lineTo(107.8, 0.0);
ctx.closePath();
ctx.fill();
//Rectangle
ctx.fillStyle = "green";
ctx.beginPath();
ctx.moveTo(0, 250);
ctx.lineTo(500, 250);
ctx.lineTo(500, 300);
ctx.lineTo(0, 300);
ctx.lineTo(0, 300);
ctx.fill();
ctx.closePath();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(0, 350);
ctx.lineTo(500, 250);
ctx.lineTo(500, 300);
ctx.lineTo(0, 300);
ctx.lineTo(0, 300);
ctx.fill();
ctx.closePath();
//Cone
ctx.fillStyle = "#67ff30";
ctx.beginPath();
ctx.moveTo(150, 250);
ctx.lineTo(300, 20);
ctx.lineTo(450, 250);
ctx.lineTo(150, 250);
ctx.fill();
ctx.closePath();
ctx.fillStyle = "Brown";
ctx.beginPath();
ctx.moveTo(400, 250);
ctx.lineTo(450, 80);
ctx.lineTo(600, 250);
ctx.lineTo(400, 250);
ctx.fill();
ctx.closePath();
ctx.beginPath();
// get 2 canvas
var landscape_canvas = document.getElementById("landscape1");
var ctx = landscape_canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 600, 450);
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();
ctx.beginPath();
}
</script>
</head>
<body>
<canvas id="landscape" width="800" height="350"></canvas>
<canvas id="landscape1" width="800" height="150"></canvas>
</body>
</html>

Press F5 and see the output: