Basic Of HTML Canvas

Definition:

The canvas is an HTML non-empty element that is used to draw graphics on web pages. The HTML <canvas> gives you an easy and powerful way to draw graphics using JavaScript.

HTML Canvas Example

<canvas id="myCanvas" width="200" height="200"></canvas>

The width and height attribute is necessary to define the size of the canvas.

The <canvas> element must have an id attribute so it can be referred to by JavaScript.

By default, the <canvas> element has no border and no content we can add a border and other styles using CSS.

How to draw the canvas With JavaScript.

Note:- The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Step 1: Define the canvas by using <canvas> element.

<canvas id="myCanvas" width="200" height="200" style="border:solid"></canvas>

Step 2: Find the Canvas Element by using the HTML DOM method getElementById():

var canvas = document.getElementById("myCanvas");

Step 3: Create a Drawing Object

The getContext() is a predefined HTML object, with properties and methods for drawing:

var obj = canvas.getContext("2d");

Step 4: Set the fill style of the drawing object.

In my example we fill the style of the drawing object to the color blue:

obj.fillStyle = "blue";

The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is black.

Overall code:

<!DOCTYPE html>
<head>
    <title>HTML Camvas</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200" style="border: solid;"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var obj = canvas.getContext("2d");
        obj.fillStyle = "blue";
        obj.fillRect(0,0,200,200);
    </script>
</body>
</html>

In the above code, we used the fillRect(x, y, width, height) method to draw a rectangle, filled with the fill style, on the canvas.

-:Output:-