HTML CANVAS

learn JavaScript the fun way

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:

Very good tutorials:

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

exampleview 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)

exampleview 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)

exampleview html

basics - random squares (2)

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


html canvas experiments - basics - random squares (2)

exampleview html

basics - random squares (3)

This is a refrain on the 2 previous examples.


html canvas experiments - basics - random squares (3)

exampleview 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)

exampleview 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

exampleview html

colorCircle

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


html canvas experiments - colorCircle

exampleview html

coloredEye


html canvas experiments - coloredEye

exampleview 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

exampleview 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

exampleview html

FireWarcs

Firwork type of effect with Arcs.


html canvas experiments - FireWarcs

exampleview 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

exampleview 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

exampleview html

Snake

A basic snake game with audio effects.


html canvas experiments - Snake

exampleview 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

exampleview 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

exampleview html

SHARE THIS PAGE!

Please send suggestions or bugs to info@quickersite.com