Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

How to Code - Realistic Canvas Fireworks

Chris Courses via YouTube

Start learning Write review
Corporate Finance Institute Ad

Build the Finance Skills That Lead to Promotions, Not Just Certificates

Learn More → DataCamp Ad

Power BI Fundamentals - Create visualizations and dashboards from scratch

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This beginner tutorial builds an interactive fireworks animation with HTML5 Canvas and JavaScript. It covers particle rendering, randomized expansion, trails, gravity, friction, fading, removal, and colorization.

Syllabus

Project overview
Initial canvas setup
Add click event listener to populate particles array
Render particles on click
Add particle velocity for ring expansion effect
Add randomness to ring expansion
Create light trail effect
Add gravity and friction
Fade particles out over time and remove from canvas
Colorize particles
Speed-run / additional firework examples
Outro / Intro to chriscourses.com

Taught by

Chris Courses

Reviews

Start your review of How to Code - Realistic Canvas Fireworks

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.