HTML5 canvas reference
Summary: A reference to the HTML5 canvas tag API functions and settings. There examples provided which can help you to master the API. The RGraph blog also has more examples of using the canvas tag.
Learn how to use the canvas tag API
With the new HTML5 specification comes a whole bag of new goodies including a new
tag - <canvas>. This tag is effectively
like a piece of paper on your page onto which you can draw and this is what the
majority of the RGraph library is based on. The drawing is done
by JavaScript and there's a whole bunch of functions available to you to draw shapes
and lines with.
Because <canvas> uses a "fire and forget" methodology there is no DOM
for you to get references to shapes already
drawn on the canvas - so you must remember the coordinates of the shapes
yourself. It's because of this that the <canvas>
tag is so fast.
Despite this though there is a Path2D object that has been added, along with
other new features that have
been specified by the W3C that will allow you
to retain path information and test
at a later time for hits etc. The Path2D object is
described here. So on to the information!
The canvas element
The canvas state
Drawing rectangles
Path functions
- The
beginPath()function - The
closePath()function - The
moveTo()function - The
lineTo()function - The
rect()function - The
arc()function - The
arcTo()function - The
ellipse()function - The
quadraticCurveTo()function - The
bezierCurveTo()function - The
stroke()function - The
fill()function - The
clip()function - The
isPointInPath()function - The
isPointInStroke()function - The
Path2Dobject
Linedash options
Color options
- The
fillStyleproperty - The
strokeStyleproperty - Linear gradients
- Radial gradients
- The
createPattern()function
Images
Transformations
- The
translate()function - The
rotate()function - The
scale()function - The
transform()function - The
setTransform()function
Text
Shadow options
- The
shadowColorproperty - The
shadowBlurproperty - The
shadowOffsetXproperty - The
shadowOffsetyproperty
Pixel manipulation
- The
ImageDataobject - The
get Image Data()function - The
put Image Data()function - The
create Image Data()function