Animations, Art and Photography

HTML5 Animations and Art

Artist paint on a canvas- in an art gallery you will see canvases of all sizes.

Paintings are made to look 3 dimensional using perspective and diminution.

Perspective: horizontal lines converge to a vanishing point, vertical lines shorten.

Diminution: objects appear smaller the further they are away from the observer.

Using perspective and diminution we can make 3 dimensional drawings on canvas.


Artists paint the background first, distant objects next, objects nearest to them last.

When an object obscures part of another object we perceive it as nearer to us.

Objects that move away from us get smaller, objects moving towards us get larger.


We can use artists' techniques to create realistic 3D animations intuitively.


It is not possible to create HTML5 animations without using some mathematical techniques.

Animations on this Website

The HTML5 canvas is an HTML element: each canvas on an HTML5 page is defined in a canvas tag.

Multilayered canvases are used: they reduce the processing time of animations.

Canvases can display images, javaScript drawings and animations in any mix.

Canvases are styled so they appear the same to users and they have a simple user interface.

The Next button controls canvas sequences- Play, Pause and Repeat allow the user to control animations.

Canvases that have buttons have an event listener and an event handler.

Descriptive text associated with each canvas is also controlled by the Next button.

Each web page is divided into HTML5 sections, canvas size is changed dynamically to suit images drawn on it.

Each animation has a javaScript animation file and a specific javaScript file.

Shapes have been created using javaScript, using basic javaScript elements.

This allows shapes such as ellipses, stars and polygons to be used with all of the major browsers.