w3resource

HTML5 Canvas Element Tutorial

Canvas Element

In this page, we have discussed Description, Usage, Attributes, Example and Result, Compatibility of HTML5 canvas element.

The Canvas (<canvas>) HTML element provides us with the opportunity to draw graphics on the browser. Usually, this is done with the help of JavaScript. HTML5 Canvas element opened a new channel of opportunities to create applications, awesome graphics, and animations, all with HTML5 and JavaScript.

Usage

<canvas id="identification" width="width" height="height"></canvas>

Where, 'identification' is to identify the canvas block in an HTML page / application, 'width' and 'height' are width and height of the area used by canvas element to present the graphics or animation.

Whether start and end tag are required

Both the start tag and the end tag are mandatory.

What a canvas element can contain

It can contain either phrasing content or flow content.

Which elements can contain canvas element

Any element that accepts phrasing content or any element that accepts flow content.

Attributes

Besides global attributes, canvas element has two attributes, 'width' and 'height'. The following table shows the detail of those attributes.

Name of the attribute Description Default value
width Width of the browser coordinate space taken by the associated canvas element to present graphics or animation. Measured in pixels. 300
height height of the browser coordinates space taken by the associated canvas element to present graphics or animation. Measured in pixels. 150

Example

<!DOCTYPE html>
<head>
<title>Canvas tutorial example</title>
<script type=”text/javascript”>
function draw(){
var canvas = document.getElementById('example');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 2px solid red; }
</style>
</head>
<body onload="draw();">
<canvas id=”example” width=”250" height=”250"></canvas>
</body>
</html>

Result

the output of canvas element example

Compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 1.5 (1.8) 1.0 9.0 9.0 1.0

Previous: HTML5 Audio Element Tutorial
Next: HTML5 command Element Tutorial

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/html5/canvas-element.php