HTML5 canvas and javascript fireworks tutorial

View code Play Walkthrough

Description

Learn to make a fireworks display with HTML5 Canvas and JavaScript. In this demo, the pixel sized rockets launch from the bottom of the screen automatically, and by the click of your mouse. You can also click and drag to launch multiple fireworks.

The tutorial covers keeping track of and looping over objects contained in arrays, tracking mouse clicks and coordinates, animating fireworks to specific target coordinates, and making beautiful particle explosions through the use of randomly generated values.

Feel free to play with the config variables in the JS code to have fun with the experiment.

Add New Comment

12 Comments

(close)
Hugo

Hugo

Thanks! I’m trying to think how to use this in some sort of way..

Smit

Smit

Thanks..but this code will be excuted properly or where to write this code…?

Szabolcs Szasz

Szabolcs Szasz

Beautiful! Thanks!

mavarick

mavarick

very good!

noman khan

noman khan

so beutiful

stijn

stijn

i want to let the text go over the fireworks help!

Fondra

Fondra

Jack.. can i ask something? how can i play this firework inside from a table.. it seems play just in full screen windows.
Thanks in advance ^^

Gulshan

Gulshan

Very nice fireworks!!
Cheers on the great work!!

vamshi

vamshi

how can run these programs on my system? how can I save them?

Kenshin

Kenshin

How to change number fireworks?

good youtube cameras also

good youtube cameras also

The camera can be a very essential thing and with out life becomes very boring.
Even if your surveillance camera is positioned correctly this doesn’t
happen necessarily mean that it’ll catch all crime or misbehavior done in the area.
Best weatherproof cameras The rugged Pentax WG1 GPS camera offers photographic performance, innovative camera features and elegance that surpass other outdoor compact cameras.

Now we contain the underwater cameras that allow us to see
the world under the waves. This implies that this Olympus SZ-10
may be the same as the digital camera that is found in stores.

5x 10x 15x 20x

12 Comments

Description