The HTML
<canvas> element:
- Used to draw graphics, on the
fly via JavaScript, on web pages
- Is only a container for graphics; you must call JavaScript
methods to actually draw the graphics.
There is a
W3C CANVAS Tutorial (opens in new window).
Graphics are incorporated into web pages by embedding the
canvas element
in a parent HTML document.
This specifies a rectangular area on an HTML page. Common attributes
are:
- id: So JavaScript code can refer to the canvas
- width, height: To give dimensions to the canvas
- style: To style the canvas (e.g. give it a border) using
CSS
The example file shown below renders the image shown to the right.
Note that the
canvas element shown has no children.
Drawing on a canvas must be done through JavaScript and requires the
canvas element's
graphics context.
The graphics context is the object for which the various drawing
methods are defined.
Typically, to draw on a canvas you must:
- Find the canvas element using the HTML DOM
method getElementById
- Get the graphics context for the canvas element
using getContext
- Draw on the canvas using one of a number of defined graphics
methods
These must be done in the context of a
<script> element.
One type of object you can draw on a canvas is a
path. A path is
a sequence of graphical elements that together constitute a shape.
Some methods for drawing a path are:
- beginPath: Begins a path, or resets the current path
- moveTo: Moves the path to a specified point in the
canvas, without creating a line
- lineTo: Adds a new point and creates a line to that point
from the last specified point in the canvas
- closePath: Creates a path from the current point back to
the starting point
- stroke: Actually draws the path you have defined
Here is an example of drawing outlines for the water jug puzzle.
Note that the JavaScript code is kept in separate files.
waterJug.js:
paths.js:
You can also draw text in a variety of fonts, sizes, and colors.
Text location is given by coordinates of the lower left corner of the
box containing the text.
Some methods for drawing text are:
- font: To indicate font properties including name and size
- fillText: To draw text at a specific location
- fillStyle: To give text a style, including color
- clearRect: To clear a rectangular area of any previous
text or graphics
Here is an example of adding text to the drawing of the water jug puzzle.
waterJug.js:
textLabels.js:
You can draw and fill rectangles of various sizes and colors.
Some methods for drawing rectangles are:
- rect: Creates, but does not draw, a rectangle with no fill color
- stroke: Draws a created rectangle
- fillRect: Draws a "filled" rectangle. Default color is black.
- fillStyle: To give a filled rectangle an alternative color
Here is an example of adding rectangles to the drawing of the water jug
puzzle to indicate water level:
waterJug.js:
rects.js:
You create animations with
canvas by executing graphical
operations repeatedly.
Some methods supporting animation are:
- setInterval: Executes a function repeatedly, separated by
a given delay
- clearInterval: Stops an animation begun
by setInterval
- clearRect: Clears a drawing area so that an animation
does not include residual pixels
- requestAnimationFrame: Requests that a
specified function be executed to update an animation before the
next repaint
To the right is an animation that represents the filling and emptying of water
jugs:
waterJug.js:
animation.js:
Recall that the
WaterJugState and
FarmerState
constructors both define
makeCanvas methods that the
framework's
ProblemPanel object uses to create the problem
solver's GUI layout.
Currently, these
makeCanvas methods simply call the
makeDefaultCanvas method that state objects inherit from the
State prototype (see
State.js on menu at left), and
that uses a state's
toString method for state display.
To add water jug graphics to the problem solving framework, we redefine
the
WaterJugState constructor function's
makeCanvas
method to create a custom graphical representation as we have described.
The new
WaterJugState constructor function is defined
in
WaterJugStateGraphics.js, shown at left. We test it
with
WaterJugGraphicsTest.html, shown at left and rendered
below.
Note that the FWGC problem still uses the
toString state
representation.
The only change to
solve.html is to replace
with:
The changes to
solve.js are minimal and shown below.
The most important change is in
updateState, which assumes that
any state object has a
canvas method that accepts:
- The current canvas element's graphics context, and
- The previous state of the problem, so that an animation from the
previous state to the current state can be performed
Note that to get a DOM object from a JQuery object, you use
the
[0] index.
Another change is in
changeProblem, where the problem object
must be queried to find the width and height assigned to the canvas
drawing area:
- The problem object's canvasWidth
and canvasHeight properties are used for this purpose.
- They are set in the WaterJugProblem constructor function,
shown in the menu to the left.
The old
WaterJugState constructor function (without graphics) is
shown in the menu to the left, along with the new constructor
function. Note:
- The old object's toString method (and helper functions)
has been removed
- The new object has the canvas method defined (along with
the previously described helper
methods paths, textLabels, rects,
and animate, etc.)