HTML and CSS Reference
In-Depth Information
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
API Reference
A brief overview of the canvas scripting API is provided in Tables 3-9 through 3-21. Selected
examples of use can be found in Chapter 2.
Example
<canvas id="canvas1" height="400" width="400">
<p class="error">
Canvas-Supporting Browser Required
</p>
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
/* draw simple figure of red and green squares */
context.fillStyle = "rgb(255,0,0)";
context.fillRect(0,0,100,100);
context.fillStyle = "rgb(0,255,0)";
context.fillRect(25,25,50,50);
</script>
Name
Description
Example
getContext
(contextId)
Returns an object that exposes
the API necessary for accessing
the drawing functions. Currently,
the only
contextId
is
'2d'
.
var context = canvas
.getContext('2d');
toDataUrl([type])
Returns a
data:
URL of the
canvas image as a file of the
specified type or a PNG file by
default.
var dataurl = canvas
.toDataUrl();
Height of the
canvas
element.
Default value is
150
.
height
var canvas = document
.getElementById("canvas1");
canvas.height = 300;
width
Width of the
canvas
element.
Default value is
300
.
var canvas = document
.getElementById("canvas1");
canvas.width = 600;
T
ABLE
3-9
Primary canvas Methods and Properties
