Reader Level:
ARTICLE

Draw Shapes With HTML5 Canvas

Posted by Gaurav Gupta Articles | HTML 5 May 16, 2012
In this Article We see the Basic shapes with HTML5 Canvas.
  • 0
  • 0
  • 8969

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 the different shapes like Canvas curves and Canvas path.

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:

Clipboard07.jpg

COMMENT USING

Trending up