HTML Canvas

The HTML canvas element is used to display graphics on the webpage with an aid of Javascript. It is worth mentioning here that the HTML canvas element cannot be used to draw graphics, but it is only a container for that. You have to add Javascript code to draw graphics.

The HTML canvas element is equipped with many methods for drawing paths, boxes, circles, texts, and attaching images.

Which Browsers Support HTML Canvas Element?

Below is the list of Browsers and their current versions that support canvas tag.

Google Chrome 4.0
Microsoft Edge 9.0
Firefox 2.0
Safari 3.1
Opera 9.0

HTML Canvas Examples

The HTML canvas tag displays a rectangular area on a webpage. By default, the canvas element does not contain any external border or content.

<canvas id="Canvas1" width="250" height="190"></canvas>

While defining canvas element, don’t forget to include id attribute in it because it has to be used by the <script> tag. Furthermore, add width and height attribute to the canvas to specify size of the canvas.

To define border across the canvas graphics, use the style attribute

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="Canvas1" width="250" height="190" style="border: 1px solid #bfff80;"></canvas>
</body>
</html>

The output of this code will be

HTML Canvas

Add Javascript to Your Canvas

After creating a canvas, you have to add Javascript to add the graphics

Drawing a Line

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="Canvas1" width="250" height="190" style="border: 1px solid #bfff80;"></canvas>
    <script>
        var canvas = document.getElementById("Canvas1");
        var cx = canvas.getContext("2d");
        cx.moveTo(0, 0);
        cx.lineTo(240, 190);
        cx.stroke();
    </script>
</body>
</html>

The output of this code will be

HTML Canvas

Using Canvas Graphics to Draw Circle

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="Canvas1" width="250" height="190" style="border: 1px solid black;"></canvas>
    <script>
        var canvas = document.getElementById("Canvas1");
        var cx = canvas.getContext("2d");
        cx.beginPath();
        cx.arc(95, 105, 85, 0, 2 * Math.PI);
        cx.stroke();
    </script>
</body>
</html>

The output of this code will be

HTML Canvas

Using HTML Canvas to Draw Text

<!DOCTYPE html>
<html>
<head>
    <title> HTML Canvas </title>
</head>
<body>
    <canvas id="Canvas1" width="250" height="190" style="border: 1px solid black;"></canvas>
    <script>
        var canvas = document.getElementById("Canvas1");
        var cx = canvas.getContext("2d");
        cx.font = "15px sans-serif";
        cx.fillText("Welcome to vish Academy", 8, 48);
    </script>
</body>
</html>

The output of this code will be

HTML Canvas

Using HTML Canvas to Stroke Text

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="Canvas1" width="250" height="190" style="border: 1px solid black;"></canvas>
    <script var canvas = document.getElementById("Canvas1"); var cx = canvas.getContext("2d");
        cx.font = "25px sans-serif"; cx.strokeText("Welcome to vish", 8, 48); </script>
</body >
</html >

The output of this code will be

HTML Canvas

Drawing Linear Gradients

<!DOCTYPE html>
<html>
<head>
    <title> HTML Canvas </title>
</head>
<body>
    <canvas id="Canvas1" width="250" height="190" style="border: 1px solid #d4d4d4;"></canvas>
    <script>
        var canvas = document.getElementById("Canvas1");
        var cx = canvas.getContext("2d");
        //create gradient
        var grid = cx.createLinearGradient(0, 0, 200, 0);
        grid.addColorStop(0, "red");
        grid.addColorStop(1, "white");
        // fill gradient
        cx.fillStyle = grid;
        cx.fillRect(25, 25, 180, 100);
    </script>
</body>
</html>

The output of this code will be

HTML Canvas

Drawing Circular Gradient

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="Canvas1" width="250" height="190" style="border: 1px solid black;"></canvas>
    <script>
        var canvas = document.getElementById("Canvas1");
        var cx = canvas.getContext("2d");
        //create gradient
        var grid = cx.createRadialGradient(70, 50, 3, 95, 70, 90);
        grid.addColorStop(0, "red");
        grid.addColorStop(1, "white");
        // fill gradient
        cx.fillStyle = grid;
        cx.fillRect(25, 25, 180, 100);
    </script>
</body>
</html>

The output of this code will be

HTML Canvas

Extra learning resource:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Next Lesson » « Previous Lesson