<!-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article> (HTML5)
<aside>(HTML5)
<audio> (HTML5)
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas> (HTML5)
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command> (HTML5)
<datalist> (HTML5)
<dd>
<del>
<details> (HTML5)
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed> (HTML5)
<fieldset>
<figcaption> (HTML5)
<figure> (HTML5)
<font>
<footer> (HTML5)
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header> (HTML5)
<hgroup> (HTML5)
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen> (HTML5)
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark> (HTML5)
<menu>
<meta>
<meter> (HTML5)
<nav> (HTML5)
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output> (HTML5)
<p>
<param>
<pre>
<progress> (HTML5)
<q>
<rp> (HTML5)
<rt> (HTML5)
<ruby> (HTML5)
<s>
<samp>
<script>
<section> (HTML5)
<select>
<small>
<source> (HTML5)
<span>
<strike>
<strong>
<style>
<sub>
<summary> (HTML5)
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time> (HTML5)
<title>
<tr>
<tt>
<u>
<ul>
<var>
<video> (HTML5)
<wbr> (HTML5)
Η ετικέτα <canvas>
Ορισμός και χρήση
Η ετικέτα <canvas> ορίζει μια ορθογώνια περιοχή στην οποία μπορούμε να σχεδιάσουμε γραφικά, όπως ορθογώνια, κύκλους, χαρακτήρες, αλλά και εξωτερικές εικόνες. Μπορούμε επίσης να εφαρμόσουμε διάφορα εφέ και μεταμορφώσεις στα γραφικά που σχεδιάζουμε.

Καλό είναι μεταξύ των ετικετών αρχής και τέλους να γράφουμε ένα περιγραφικό κείμενο, όπως 'Ο browser σας δεν υποστηρίζει την ετικέτα canvas της HTML5', το οποίο θα εμφανίζεται στους browsers που δεν υποστηρίζουν την δυνατότητα αυτή.

Με την σχεδίαση στο canvas μπορεί κάποιος να δημιουργήσει από απλά σχήματα μέχρι και πολύπλοκα animation, αρκεί βέβαια να γνωρίζει JavaScript. Έχω όμως την αίσθηση ότι θα δημιουργηθούν αρκετά αυτοματοποιημένα εργαλεία όπου θα μπορεί κάποιος να δίνει παραμέτρους, όπως σχήματα, χρώματα και εφέ, για να επιστρέψει έτοιμο κώδικα.

Ετικέτα τέλους: </canvas>
Παράδειγμα
Πηγαίος Κώδικας Αποτέλεσμα στον browser

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">
window.onload = function doCanvas() {
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0," #3366FF ");
grd.addColorStop(1," #AFDEF8");
cxt.fillStyle=grd;

// to efe ths skias
cxt.shadowOffsetX = 10;
cxt.shadowOffsetY = 10;
cxt.shadowBlur = 40;
cxt.shadowColor = "black";

cxt.fillRect(10,10,175,50);

}
</script>

</head>
<body>

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

</body>
</html>

 your browser does not support the canvas tag
Διαφορές στην χρήση μεταξύ της HTML4.01 και την HTML5
Η ετικέτα <canvas> είναι νέα στην HTML5
Ιδιότητες
Ιδιότητα Τιμή Περιγραφή
height (HTML5) pixels
%		 Ορίζει το ύψος της περιοχής σχεδίασης
width (HTML5) pixels
%		 Ορίζει το μήκος της περιοχής σχεδίασης
Κοινές (standard) ιδιότητες που μπορεί να πάρει η ετικέτα:
Η ετικέτα <canvas> υποστηρίζει τις standard ιδιότητες της HTML5
HTML Γεγονότα που μπορεί να πάρει η ετικέτα:
Η ετικέτα <canvas> υποστηρίζει τις ιδιότητες events της HTML5