HTML5 Canvas

 

Rectangles, Paths, and Arcs

Draw points, lines, rectangles, arcs, or circles, either empty or filled, and determine whether or not a point lies within a path. [canvas.getContext('2d'), beginPath(), moveTo(), lineTo(), arc(), isPointInPath(), closePath(), stroke(), fill(), rect(), strokeRect(), fillRect(), clearRect(), strokeStyle, fillStyle, lineWidth, rgb()]

Quadratic, Bezier and ArcTo Curves

Draw smooth curves between points, specifying control points to adjust the path of the curve. [quadraticCurveTo(), bezierCurveTo(), arcTo()]

Text

Display text at any point, with the appropriate font, vertical, and horizontal alignment. [strokeText(), fillText(), measureText(), font, textAlign, textBaseline]

Line Caps and Joins

Specify what the ends of lines should look like, or how two lines should intersect. [lineCap, lineJoin]

Line Miter Limits

Specify how badly mitered line joins should look when the two lines intersect at a very small angle, by truncating the join. [miterLimit]

Composite Operations

Specify what should happen when two paths or figures overlap. [globalCompositeOperation]

Transformations

Position, stretch or compress, or rotate figures, for instance to make ellipses out of circles. [translate(), scale(), rotate(), transform(), setTransform(), save(), restore()]

Linear and Radial Gradients

Use linear and radial colour gradients to fill figures and text. [createLinearGradient(), createRadialGradient(), lrg.addColorStop()]

Shadows

Specify whether lines have shadows, and what the shadows should look like. [shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor]

Alpha Transparency

Control how transparent a drawn figure should be. [globalAlpha, rgba(), hsla())

Images

Draw images retrieved from the Internet; click to cycle between them. Note that loading a remote image into the canvas taints it permanently, so you will have to refresh the page to enable some of the other demos to work properly. [drawImage()]

Patterns and Clipping Regions

Can use repeating images to tile any fillable figure, and can define arbitrary clipping regions. [save(), restore(), clip(), createPattern()]

RGB Venn Diagram

Demonstate a more detailed use of globalCompositeOperation = "lighter".

Venn Diagrams

Draw four- and five-set Venn diagrams, with ellipses; click to cycle between them.

HSL Colour Wheels

Specify colours using the Hue/Saturation/Luminosity model, rather than Red/Green/Blue. [hsl(), hsla()]

Colour Picker

Click on the colour spectrum on the left to select the hue, then click on the saturation & luminosity selector on the bottom right to select the colour.

Pythagoras’s Theorem

Click to see some of the basic steps in Euclid’s proof.

  1. Let ACB be a right-angled triangle with right angle CAB.
  2. On each of the sides BC, AB, and CA, squares are drawn, CBDE, BAGF, and ACIH, in that order. The construction of squares requires the immediately preceding theorems in Euclid, and depends upon the parallel postulate.
  3. From A, draw a line parallel to BD and CE. It will perpendicularly intersect BC and DE at K and L, respectively.
  4. Join CF and AD, to form the triangles BCF and BDA.
  5. Angles CAB and BAG are both right angles; therefore C, A, and G are collinear. Similarly for B, A, and H.
  6. Angles CBD and FBA are both right angles; therefore angle ABD equals angle FBC, since both are the sum of a right angle and angle ABC.
  7. Since AB is equal to FB and BD is equal to BC, triangle ABD must be congruent to triangle FBC.
  8. Since A-K-L is a straight line, parallel to BD, then parallelogram BDLK has twice the area of triangle ABD because they share the base BD and have the same altitude BK, i.e., a line normal to their common base, connecting the parallel lines BD and AL.
  9. Since C is collinear with A and G, square BAGF must be twice in area to triangle FBC.
  10. Therefore rectangle BDLK must have the same area as square BAGF = AB2.
  11. Similarly, it can be shown that rectangle CKLE must have the same area as square ACIH = AC2.
  12. Adding these two results, AB2 + AC2 = BD × BK + KL × KC.
  13. Since BD = KL, BD × BK + KL × KC = BD × (BK + KC) = BD × BC.
  14. Therefore AB2 + AC2 = BC2, since CBDE is a square.

Picture Drawing

Fun with drawing.

SVG Paths

Can even handle Scalar Vector Graphic (SVG) paths, with a little help.

Text along Quadratic and Bezier Curves

Can, with a little help, draw text along curved paths.

Dashed and Dotted Lines and Curves

Can, with a little help, draw dashed, dotted, and dashed-dotted straight lines and quadratic and Bezier curves; click to switch between straight and curved lines.

Point-in-Path Processing

Click on the canvas a number of times before clicking in the upper-left corner to define a red path, then repeat this a couple of times to define green and blue paths. Subsequent clicks will generate messages indicating which path you clicked in, with the later paths taking precedence.

Pie Charts

Regular and “exploded” charts; click to cycle between them.

Graphs and Bar Charts

Can create graphs and bar charts; click to cycle between them.

Curves from 3 or More Points

Draws circles from three points, ellipses from four, and Bezier splines from three or more; click on the canvas to select the points.

Bezier Curve Preview

Click on the canvas to place the initial, final, and control points, or click on the location of any of the above to reposition them; click in the top-left corner to go to Bezier mode, the top-right corner to go to quadratic mode, the bottom-left corner to display the canvas JavaScript to generate the displayed curve, or the bottom-right corner to reset all the positions.

Photo Cube

Skew square photos to simulate a cube of photos.

Koch Snowflake

Fun with fractals!

Mandelbrot Set

More fun with fractals!

Scribble Pad

Use the canvas as an actual drawing surface, by clicking on the rainbpw to select a colour and dragging the mouse across the canvas while holding down the left mouse button.

Magnifying Glass

Use your mouse to position the glass over the canvas, clicking on the left side of the canvas to decrease the magnification or on the right side to increase it.

Kaleidoscope

Pretty symmetric pictures; click to stop or restart.

Starfield Animation

More simple animation.

Logistics Equation

Explore the stationary points of the logistics equation, f(x) = a * x * (1 - x).

Optical Illusions

Click on the right side to go through the available optical illusions.

Sources and References:

Rotating Squares

Draw a simple animation; click to stop or restart.

Bouncing Balls

More complicated animation, with some radial gradients included; click to stop or restart.

Colliding Bouncing Balls

Very complicated animation, with detailed collision physics; click to stop or restart.

Image-Data Manipulation and Sprite Animation

Can handle mouse events, determine the position of the click within the canvas, and use double-buffering with a non-displayed canvas element to prevent flickering; click in the upper-left quadrant to duplicate a block to its right, in the upper-right quadrant to reverse-video the block, in the lower-left quadrant to convert the block to grey-scale, or in the lower-right to cycle between the red/green/blue values; click in the top-left corner to switch to sprite animation. [createImageData(), getImageData(), putImageData()]

3D Animation: Hypercube

3D view of a rotating 4-dimensional cube and tetrahedron; click to stop or restart.

3D Animation: Star Chart

3D view of the stars closest to the Earth; click to stop or restart.

3D Animation: Polyhedrons

3D view of some regular polyhedrons; click to stop or restart.

3D Hidden Line Routine

Start with a 3D plot of a function of x and y, then click to see it with hidden lines removed, then click a second time to see it animated.

Relativistic Orbital Precession

No discussion of the CANVAS element would be complete without any mention of the effect of Einstein’s theory of general relativity on planetary orbits.

Untangle

Drag and drop the circles until no pair of straight lines intersect each other; click in the upper-left corner to start with a new pattern.

Tron

Use the arrow keys to direct your vehicle, avoiding your opponents, the canvas edges, and any barriers that may appear; click to start a new game.

Stained Glass

Drag and drop the coloured panes of glass onto the window grid, making sure that adjacent edges have the same colour.

3D Tic-Tac-Toe

The object of the game is to get four cells in a row before the computer does. You select which cell you want by clicking on it with the mouse. The levels are drawn on top of each other, where level 1 is at the bottom, row 1 is toward you, and column 1 is on the left. Your moves will be displayed using white ellipses, while the computer’s moves are indicated with red diamonds. Don’t forget to read the messages at the bottom of the canvas! You can click at the top-left of the canvas to restart the game with the computer moving first, or at the top-right of the canvas to start a short demo.

Good luck! (You’ll need it…)

Butterfly and Chrsyanthemum Curves

Here are a couple of very pretty curves, with a variety of adjustable parameters. Click on any of the “scrollbars” at the top of the canvas to select a new value for the parameter, or click in the upper-left corner to switch between the curves or in the upper-right corner to restore the original values of the parameters.

Conway’s Game of Life

Watch the first and most famous two-dimensional cellular automaton in action, with rule 23/3: an active cell survives to the next generation if it has exactly 2 or 3 neighbours, otherwise it becomes inactive; an inactive cell becomes active if it has exactly 3 neighbours, otherwise it remains inactive. Click in the centre section to pause or restart, click on the left or right side to cycle between various starting patterns, or click in the top-left corner to display a clickable list of available patterns. Use the arrow keys to scroll across the surface, the + and - keys to speed up or slow down the display, or the page-up and page-down keys to zoom in or out.

(Uses AJAX and so requires being hosted on a web server.)

Slide Show

Click on the canvas to cycle through the various directions and effects.

Multi-Level Maze

Use your keyboard (arrow keys) or mouse (click on a cell in the same row or column as your current cell) to navigate your way through the maze to the exit; use the + or minus keys to go up or down stairs, or click on the upper or lower half of a stairway cell.

Memory

The goal of this two-player game is to try to match the shape and colour of two figures by clicking on their boxes.

Pentominos

Drag and drop the 12 five-cell shapes to fill in the grey grid, clicking on the icons to flip or rotate the shapes as required. Click in the upper left corner to display a clickable menu of puzzle grids.

Hexominos

Drag and drop the 35 six-cell shapes to fill in the grey grid, clicking on the icons to flip or rotate the shapes as required. Click in the upper left corner to display a clickable menu of puzzle grids.

IQ Blocks

Drag and drop the 10 shapes to fill in the grey grid, clicking on the icons to flip or rotate the shapes as required. Click in the upper left corner to display a clickable menu of puzzle grids.

15 Puzzle

Play the classic puzzle: click on any tile adjacent to the empty space, until the tiles have all been restored to their original locations.

Langton Ant Cellular Automaton

Simple cellular automaton, in which the ant makes a left or right turn depending on the colour of the background before moving forward one space; the colours cycle regularly. Click to switch to the next set of turn rules.

Turmite

Simple cellular automation, in which the turmite can make a left, right, or u-turn, or keep going in its current direction, depending on its state and the colour of the background. Click to switch to the next set of turn/colour rules.

Parallel Bezier Curves

Simple example showing the perils of trying to draw a curve paralle to a quadration or cubic Bezier curve.

Pythagoras Trees

Click on the canvas to display a random fractal structure based on creating a right-angle triangle using one of the sides of a square as the hypotenuse, creating squares on each of the opposite sides, and then repeating indefinitely.

Dijkstra’s Shortest-Path Algorithm

Try to figure out the path that goes from vertex P0 to vertex P43 with the least cost; click to see the solution or try again.

Perlin Noise

JavaScript implementation of the Java reference implemention of Ken Perlin’s Improved Noise code (http://cs.nyu.edu/~perlin/noise/). Click on the left and right sides of the canvas to view the various demos.

Collision-Avoiding Robots

Watch how an optimum set of paths is gradually determined and used to get each circle from its start point to its end point while avoiding close encounters. Once the circles have started to move, you can click on the canvas to restart with a new configuration. Adapted from Java code written by Ken Perlin (http://mrl.nyu.edu/~perlin/experiments/path/).

Waveform Generation

Construct waveforms by setting the amplitudes and phases of a fundamental oscillation and various of its harmonics. Click on the left panel to modify the appropriate phase; click on the top panel to modify the appropriate amplitude; click on the main panel to select one of: square wave, trangular wave, sawtooth wave, or random.

Terrain (Island) Generator

Generates a random island using a Perlin noise function. Based on Python code by Christopher Breinholt, Breiny Games, http://breinygames.blogspot.com/. Click on the canvas to generate a new island.

Perlin “Exogeometry”

Draws a continuous line based on a couple of parameters. Move the mouse across the canvas in order to change these parameters and refresh the display; click on the canvas to freeze/unfreeze the parameters. Based on a concept by Ken Perlin (http://blog.kenperlin.com/?p=5641&cpage=1#comment-207324).

Boolean Operations

Can use animation to demonstrate how logic gates operate.

CIE 1931 Chromaticity Diagram

Display the CIE 1931 x-y Chromaticity Diagram, showing the RGB gamut limit (white triangle), the white point (crosshairs), the black-body colour as a function of temperature, and the positions of the natural spectrum wavelengths.

Screen Savers

Click on the canvas to display a sequence of screen savers.

Iterated Function Systems

Click on the canvas to display a sequence of fractals by the chaos game: pick a random point in the plane, then iteratively applying one of the functions chosen at random from the function system and drawing the point.

3D Hidden Surface Removal - Dance of the Cubes

Uses a simple z-buffer technique to render 3D objects, hiding parts of the object that are behind or within other objects.

3D Hidden Surface Remmmmmm……doughnuts!

Uses a simple z-buffer technique to render 3D objects, hiding parts of the object that are behind or within other objects. Click on the canvas to cycle through the various examples.

3D Hidden Surface Removal - Polyhedra

Uses a simple z-buffer technique to render 3D objects, hiding parts of the object that are behind or within other objects. Click on the canvas to cycle through the various examples.

3D Hidden Surface Removal - Curves and Pipes

Uses a simple z-buffer technique to render 3D objects, hiding parts of the object that are behind or within other objects. Click on the canvas to cycle through the various examples.

3D Hidden Surface Removal - Surfaces

Uses a simple z-buffer technique to render 3D objects, hiding parts of the object that are behind or within other objects. Click on the canvas to cycle through the various examples.

Video Display

Can use the canvas to display a video, with the possibility of manipulating the video frames, courtesy of the HTML5 VIDEO element; click on the images to stop and restart the video, or click on the rest of the canvas to cycle between manipulations (may not work for local files).

Fireworks

Simple animation

MathML + SVG = Mathematical Equations

Can save mathematical equations as an image and then insert the image onto the canvas.

Select a route from either dropdown list (ordered by route number and name, respectively) to see the route and the location of its vehicles; select “(all routes)” to just see the locations of all the operating vehicles.

References

TTC Vehicles

0 vehicles found

Status:
Minimum x:
Maximum x:
Range for x:
Width: px
Minimum y:
Maximum y:
Range for y:
Height: px
Zoom status:
First corner: px
Cursor: px
Viewport: px