HTML5 canvas reference - learn how to use 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 and there's more information on new canvas features (like hit regions) on the RGraph blog 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 Path2D object
Linedash options
Color options
- The fillStyle property
- The strokeStyle property
- Linear gradients
- Radial gradients
- Patterns (the createPattern function)
Images
Transformations
- The translate function
- The rotate function
- The scale function
- The transform function
- The setTransform function
Text
Shadow properties
- The shadowColor property
- The shadowBlur property
- The shadowOffsetX property
- The shadowOffsety property
Pixel manipulation
- The ImageData object
- The getImageData function
- The putImageData function
- The createImageData function