Launching Fireworks on Canvas: Introduction to JavaScript Where Movement Changes Based on Clicks and Particle Count

About this article
This article was created using an automated generation workflow powered by generative AI.
We reviewed the official documentation for the Canvas API and requestAnimationFrame, and prepared educational materials where fictional fireworks can be operated by clicking. No audio, location data, or personal information is used.

Verification Status: 🧪 JavaScript Syntax Verified – Actual Browser Display Unverified
On October 31, 2026, the saved JavaScript was syntax-verified in V8. Deployment to GitHub Pages, rendering, click operations, and device-specific behavior remain unmeasured.

Try it first: Launch fireworks into the night sky

🔷 Let's try operating it
Open live demo of Canvas fireworks (public deployment and browser execution not yet verified)
Source code and detailed README

Only three operations.
1. Click Launch Fireworks or click anywhere in the night sky.
2. Change Particle Count from 24 to 48 and click again.
3. Try Pause, Resume, and Clear.

When the fireworks expand, the status bar below displays the count and particle count, such as Fireworks Launch 1 – 24 Particles. Changing the particle count should alter the number of dots.This is an anticipated result based on the code and has not been verified in an actual browser.

🟦 Can be verified even if not visible to the naked eye
In addition to the rendering, the count and particle count are displayed in the status field. If the OS setting to reduce motion is enabled, the fireworks will be displayed statically.

Why dots expand

Canvas is a drawing area prepared within HTML. Points are placed with slightly varying angles around the click position. Each point has a horizontal velocity vx and a vertical velocity vy, and its coordinates change in the next frame.

flowchart LR
    A["クリック・ボタン"] --> B["粒子を生成"]
    B --> C["座標を更新"]
    C --> D["Canvasに描画"]
    D --> E["状態を文字で表示"]

The four important lines of code

p.x += p.vx;
p.y += p.vy;
p.vy += 0.045; // 下向きに曲がる変化（教材用）
p.life = Math.max(0, p.life - 0.012);

p.x and p.y represent the particle positions.vx and vy represent the amount of movement per frame, and life is used for transparency. The four lines above are an excerpt of the mechanism and are not complete, runnable code on their own.

Using requestAnimationFrame(), which signals the browser's rendering timing, the next render is scheduled only while particles remain. When stopped, the schedule is cancelled using cancelAnimationFrame().

Change one thing and compare predictions

🧪 Experiment: Changing the falling speed
Open the main JavaScript file for Daily Code, and try changing p.vy += 0.045 to p.vy += 0.09. You can expect the downward curving speed to increase.

original 0.045 to compare them. This is not a real unit of gravitational acceleration.

Run on your own PC

If you cannot open the live demo, save the pinned-commit HTML and JavaScript in the same folder.

Open the HTML in your browser or, if necessary, start python3 -m http.server 8000 --bind 127.0.0.1 in that folder and open http://127.0.0.1:8000/ on the same PC. To stop it, use Ctrl+C in the terminal. No administrator privileges, API keys, or additional libraries are required.

Troubleshooting

⚠️ Safety and Accessibility
Avoids sounds or rapid flashing and provides a stop button. If the OS prefers-reduced-motion is enabled, a static image is displayed. Important information is not locked inside the Canvas alone; states are also indicated with text. Accessibility validation per device has not been performed.

For professional use

Can be applied to small UIs that intuitively display operation results, such as training completion effects or event guidance. However, do not rely solely on motion to convey critical business metrics or warnings. Canvas is solely responsible for rendering and does not provide data persistence, authentication, or access control.

Comparing with other methods

Reading firework calculations separately from screen movement

Canvas fireworks do not animate a single image. Movement is achieved by clearing the previous drawing at short intervals and redrawing the particles' new positions and colors. If particles do not spread from the click position, check separately whether the button or click event is received first, then whether the particle generation logic executes, and finally whether it renders to the Canvas. Just because counts or particle quantities are displayed in the status panel does not prove successful rendering. Beginners can find errors more easily by separating "data updates" from "visible changes on screen."

In the implementation where particles spread radially from the clicked location, the angle is varied to determine the horizontal and vertical velocities. Launching fireworks in the center causes points to spread in all directions, whereas launching them at the edge of the screen causes some points to go outside the screen. The apparent reduction in the number of points is not a generation failure, but likely due to them exceeding the display range. If the displayed particle count differs from the number of particles you can visually track, first fix the click position to the center and re-run. Comparing under the same operating conditions helps isolate the cause.

The snippet code in the article is a simple calculation that adds velocity to position. The horizontal and vertical velocities are independent, and adding a downward change causes the particle trajectory to eventually curve downward. The value of 0.045 for educational purposes is not actual gravitational acceleration. Changing this to 0.09 should increase the downward velocity, but it does not guarantee that all points fall in the same place. If the launch position, initial velocity, and lifetime differ, the visible range will also change. When comparing, narrow down the changed value to a single one.

In the calculation that advances position per frame, the screen refresh rate may affect the speed of movement. requestAnimationFrame is an API that notifies the browser of the next rendering opportunity and does not guarantee execution at a fixed interval. When the appearance differs between a high refresh rate screen and a resource-constrained device, you need to examine not only the browser behavior but also how the program handles elapsed time. Since this tutorial uses a simplified expression, consider time-delta-based movement methods for business animations that require real-time reproducibility.

Particle lifetime represents the change until points become invisible. Decreasing transparency makes particles faint even if their coordinates are still within the screen. Deepen your understanding by distinguishing whether a particle's lifetime has expired or it has gone off-screen when it disappears. In designs where consecutively launched old particles remain in the array, invisible points are still updated, increasing device load. It is a good idea to check the clear button and particle lifetime management processing, and alternately compare conditions with a small number of particles and a large number.

How you clear the Canvas background also changes the impression of the trajectory. A method that completely clears the previous drawing allows the current position of the particles to be seen clearly. A method of overlaying backgrounds with a translucent color can make it look like an afterimage, but colors may become muddy. What we want to examine here is not the amount of particle movement, but the rendering mechanism. When changing the appearance, confirm whether the position update calculation has changed or only the screen drawing method has changed. Changing both at the same time makes it impossible to determine which process caused the issue.

The displayed width of the Canvas and the width of the internal drawing pixels are not necessarily the same. When the display is scaled down for smartphones, clicked coordinates must be converted to internal Canvas coordinates. For example, if the display width is half the internal width, a position 100px from the left edge on the display cannot be treated the same as 100px internally. If fireworks appear misaligned at the edge of the screen, check the click coordinate conversion before changing the velocity formula. The internal rendering size can also affect cases where particles appear coarse on high-resolution screens.

Recording methods when comparing experiments

The first experiment launches fireworks once with 24 particles, and then launches from the same location with 48 particles. The expected difference is point density, not necessarily the speed of an individual particle. Even if increasing the count makes movement feel slower, isolate whether it is due to device load or a change in the particle movement formula. Observing the count and particle count in the status column, the response of the clear button, and the spread of visible particles simultaneously makes the comparison concrete. Avoid assuming that continuously increasing the number of points is always better, and check both legibility and smoothness.

The next experiment returns the particle count to 24 and changes only the downward factor from 0.045 to 0.09. If velocity and launch position are the same as last time, you can expect the trajectory to curve downward more quickly. However, if pre-operation particles remain on the screen, it becomes impossible to tell which condition the points belong to. Clearing and returning to the initial state before comparison makes analysis easier. When reverting values, check whether the appearance also returns close to the original. If different, check if a cache or old file is being loaded.

When motion-reduction settings are enabled, designing fireworks to display statically is proper accessibility compliance. Do not judge a failure solely by the lack of movement. Even if point movement is not visible, it is important that text in the status column communicates the count and particle count. Whether screen readers and keyboard operations convey status correctly has not been verified in the device testing at this stage. When incorporating into business-oriented screens, ensure visual effects are not the sole means of communicating operation results.

Fireworks can be applied to event announcements or completion effects in learning materials, but the results of critical operations must also be communicated in text. Adding flashy effects to error screens can make explanation of resolution steps difficult to read. Being mindful that more points do not necessarily mean better usability, it is appropriate to combine short effects with clear status displays. Canvas is responsible for rendering, not data persistence or access control management. Considering this point separately allows you to safely apply visual effects.

GitHub Sample

📘 Complete Version and Reuse Methods
Daily-Code-Samples: Canvas Firework Tutorial
Live Demo (Public behavior unverified)

The README summarizes operations, code architecture, single-point modifications, and troubleshooting steps. The division of roles is that the article is a minimal example, and GitHub is the complete version.

Official Documentation and Verification Date

• MDN: Canvas API

• MDN: requestAnimationFrame

• MDN: prefers-reduced-motion

Official documentation check date: October 31, 2026 (JST). Successful rendering in actual browsers and successful publishing on GitHub Pages have not been verified.