HTML 5 <canvas> Tag
Example
How to display a red square, with the canvas element:
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script> |
Try it yourself » |
Definition and Usage
The <canvas> tag is used to display graphics.
The <canvas> tag is only a container for graphics, you must use
a script to actually paint graphics.
Differences Between HTML 4.01 and HTML 5
The <canvas> tag is new in HTML 5.
Tips and Notes
Tip: You can write text between the start and end tags, to show
older browser that they do not support this tag.
Note: Some browsers already supports the <canvas> tag, like
Firefox, Chrome, and Opera.
Attributes
| Attribute |
Value |
Description |
| height |
pixels |
Sets the height of the canvas |
| width |
pixels |
Sets the width of the canvas |
Standard Attributes
| class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title |
For a full description, go to Standard Attributes in HTML 5.
Event Attributes
| onabort, onbeforeunload, onblur, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress,
onkeyup, onload, onmessage, onmousedown, onmousemove,
onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect,
onsubmit, onunload |
For a full description, go to Event Attributes in HTML 5.
Click here to design a Stunning Flash Website for Free
Wix is a revolutionary web design tool that provides anyone with the possibility to create professional and beautiful websites for free.
With e-commerce features, search engine visibility and many more professional tools, Wix is the ultimate solution for creating a spectacular site while saving tons of money.
|
