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

9 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!!

5x 10x 15x 20x

9 Comments

Description