Close

HTML5 Canvas City

This is a HTML5 experiment using the HTML5 Canvas tag to build a randomized city. Each building is a separate PNG file (designed by Juul Barnard). After loading the buildings are assigned random positions in the city. Two main buildings function as links.

A draft version:

Some of the building images:

Check out the animation here

This experiment uses ‘CreateJS‘, a Canvas and Javascript drawing engine by Grant Skinner.

Because all visuals happen inside a single ‘canvas’ tag, all animation logic could be built in Javascript, without using DIV’s or jQuery animation. jQuery is still used to show the preloader bar, and to get the size of the browser window.

A ‘settings.js’ javascript file is used to set the main parameters. This includes the number of buildings, the spacing between buildings, and the frequency of buildings.

The main script then preloads and builds the city. Using CreateJS you can add elements to the canvas, and still manipulate those single elements at a later time. This is used to let the lights of the buildings switch on and off randomly.

Building design and city concept: Juul Barnard
Javascript and Canvas animation: Erik Katerborg