HTML <canvas> element was introduced in HTML5 for drawing graphics.You can use the canvas element to draw amazing stuff like shapes, graphs, manipulate images, create engaging games etc. with JavaScript.

Example

</HTML Canvas>

Basic of Canvas

The available attributes are as follows:

Attribute	Description
width	Specifies the canvas width
height	Specifies the canvas height

Examples of canvas

You can use the canvas element to draw amazing stuff like shapes, graphs, manipulate images, create engaging games etc. with JavaScript. The canvas's 2D drawable layer surface Object is referred to as CanvasRenderingContext2D; or from a HTMLCanvasElement using the .getContext("2d") method:

				
<canvas id="myCanvas">
 Cannot display graphic. Canvas is not supported by your browser (IE<9)
</canvas>
<script>
    
var ctx = document.getElementById("myCanvas").getContext("2d");
// now we can refer to the canvas's 2D layer context using `ctx`
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // x, y, width, height
ctx.fillStyle = "#fff";
ctx.fillText("My red canvas with some black text", 24, 32); // text, x, y
    
</script>

Try it Yourself

The above will create a transparent HTML <canvas> element of 300×150 px in size. :

Drawing two rectangles on a <canvas>

				

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Draw two rectangles on the canvas</title>
    <style>
        canvas {
            border: 1px solid gray;
        }

    </style>
    <script async>
        window.onload = init; // call init() once the window is completely loaded
        function init() {
            // #1 - get reference to <canvas> element
            var canvas = document.querySelector('canvas');

            // #2 - get reference to the drawing context and drawing API
            var ctx = canvas.getContext('2d');
            // #3 - all fill operations are now in red
            ctx.fillStyle = '#F44336';
            // #4 - fill a 100x100 rectangle at x=0,y=0
            ctx.fillRect(0, 0, 100, 100);

            // #5 - all fill operations are now in green
            ctx.fillStyle = 'white';

            // #6 - fill a 50x50 rectangle at x=25,y=25
            ctx.fillRect(25, 25, 50, 50);

        }

    </script>
</head>

<body>
    <canvas width=300 height=200>Your browser does not support canvas.</canvas>
</body>

</html>

Try it Yourself

This example looks like this:

Example

Note: Advance canvas tutorials are coming soon ...

Animating Canvas using javascript

Intracting with Canvas with User Action

Intracting with Canvas with User Action and design a game

HTML5 Canvas

</HTML Canvas>

What is HTML Canvas ?

HTML <canvas> element was introduced in HTML5 for drawing graphics.You can use the canvas element to draw amazing stuff like shapes, graphs, manipulate images, create engaging games etc. with JavaScript.

</HTML Canvas>

Basic of Canvas

Examples of canvas

Drawing two rectangles on a <canvas>

</HTML> Quiz Question>