There are two modern web technologies for creating rich drawn graphics within
the browser:
HTML5 Canvas and
Scalable Vector Graphics
(SVG).
- Canvas: A hypertext markup language element introduced in
HTML5 for creating and analyzing bitmap images as pixels.
The Canvas specification provides a Javascript API for accessing
the element's graphics context and performing drawing operations
with it.
- SVG: An XML-based vector graphics format.
It is a markup language for describing all aspects of an image or
Web application, from the geometry of shapes, to the styling of
text and shapes, to animation and interactivity. SVG can also be generated through
Javascript.
The problem solver below demonstrates both web graphics
technologies. The FWGC problem uses SVG to display states, while the
water jug problem uses Canvas.