HTML CANVAS

learn JavaScript the fun way

Why use HTML canvas ? LIVE DEMOS

simple site creator

The HTML <canvas> element is used to draw graphics on a web page. It's part of the HTML5 standard. It was introduced at around 2010 as an alternative to various graphical plugins that were often used at that time, like Adobe Flash.

Learn the basics:

W3 Schools

W3 Resource

Cheat Sheet

Very good tutorials:

Mozilla.org Tutorials

Eloquent JavaScript

HTML5 Canvas Tutorial for Beginners

HTML5 Canvas Tutorial for Beginners (video)

Game development in HTML Canvas

Dive into HTML Canvas

HTML Web Canvas Demo's

Demo's

Below some live examples of the HTML Canvas.

basics - a skeleton template

This is where it all starts. Check out the most basic animation I could come up with. Most JavaScript driven animations will use setInterval() to keep an animation going. I usually set the width and height of the canvas via script, i.e., the innerWidth and innerHeight properties of the browser window.

html canvas experiments - basics - a skeleton template

example view html

basics - a skeleton template (reponds to arrow keys)

This example is very similar to the previous sample, except this demo reponds to the arrow keydown events.

html canvas experiments - basics - a skeleton template (reponds to arrow keys)

example view html

basics - random squares (1)

This is another very basic animation. An array of colors, a for-loop and some randomizers are used to spice things up. Check it out!

html canvas experiments - basics - random squares (1)

example view html

basics - random squares (2)

You can also add texts to a canvas. Check it out.

html canvas experiments - basics - random squares (2)

example view html

basics - random squares (3)

This is a refrain on the 2 previous examples.

html canvas experiments - basics - random squares (3)

example view html

basics - random squares (4)

This is where it really started for me. I developed this script after I watched this movie. It all got started by simply writing down the code as shown in this video-tutorial. From there on, I was able to find my way through this jungle. This example adds in JavaScript objects and it shows a way to loop through a colorset (black/white in this case).

html canvas experiments - basics - random squares (4)

example view html

basics - using arcs for a change

This animation looks like it's quite complex, however, it's shorter and easier to understand than the previous ones. It draws growing circles that fade out after they reach a given radius. This is how it keeps the number of circles under control. Browsers tend to crash when drawing too many circles (200>).

html canvas experiments - basics - using arcs for a change

example view html

colorCircle

This is yet another attempt to play with the color circle.

html canvas experiments - colorCircle

example view html

coloredEye

example view html

Colors

This is my first attempt (not my last) to loop through basically all - at least many colors and make a nice canvas-animation out of that.

html canvas experiments - Colors

example view html

crazyCircles

This script draws circles in a full color-cycle. I limit the number of arcs to be drawn, because drawing arcs takes a lot of processing efforts for a browser.

html canvas experiments - crazyCircles

example view html

FireWarcs

Firwork type of effect with Arcs.

html canvas experiments - FireWarcs

example view html

Neon

This is one of my favorite scripts. Not only this set of colors is (slightly) animated, the colors also change their intensity all the time. This results in a very interesting neon-like animation.

html canvas experiments - Neon

example view html

randomDrops

This script not only draws arcs, but it also draws texts in Google webfonts right into a canvas. Very powerful combination!

html canvas experiments - randomDrops

example view html

Snake

A basic snake game with audio effects.

html canvas experiments - Snake

example view html

Spiro

I wrote this script after I spotted something similar in a shop. The 2 important lines in this script involve some mathematical knowledge, as cosine and sine are used to calculate coordinates on a circle.

html canvas experiments - Spiro

example view html

waterDrops

This script is similar to hypnoDrops (see above). Only 2 shades of blue are used though, giving this animation a "drops-of-water" look 'n feel.

html canvas experiments - waterDrops

example view html

Please send suggestions or bugs to info@quickersite.com