The <canvas> element

The <canvas> element is important part of HTML5, and it is used to draw, or rather help draw graphics. The <canvas< element is only a container where the graphic object will be placed, and to make it fully functional it has to be approached with a script such as JavaScript.

Syntax:

<canvas></canvas>

Attributes:

width; Defines width of the video element in pixels
height; Defines height of the video element in pixels
global attributes
event attributes

The <canvas> element should always have an id attribute so it can be referred to by JavaScript. It is also a good idea to use width and height attributes in order to define the size of your canvas.

How to use canvas in real life?

The canvas element is a pretty simple one, in sense that all of its functionality is exposed through a JavaScript object. By default, the <canvas> element has no border and no content.

Example

Example how to use canvas elements:

<html>
<head>
<title>Example</title>
</head>
<body>
<p>Filled box below is painted with a canvas method.</p>
<canvas id="mycanvas" width="250" height="150" style="border:1px solid gray;">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var canvaselm = document.getElementById("mycanvas").getContext("2d");
canvaselm.fillRect(10, 30, 75, 50);
</script>
</body>
</html>

›› go to examples ››

The <canvas> element

Syntax:

Attributes:

How to use canvas in real life?

Example

Example how to use canvas elements:

Comments

About

Contact

Get Connected