How to Build Smooth Canvas Particle Effects and Optimize Performance

Experience Particle Effect

First, see a simple yet complex particle animation where an image is broken into thousands of particles that explode outward.

How to Implement Particle Effects – Splitting Image/Text into Particles

The effect relies on pixel manipulation via the ImageData object, the only way to read real pixel data from a canvas.

Key ImageData properties:

width : region width in pixels

height : region height in pixels

data : a Uint8ClampedArray containing RGBA values (0‑255)

Pixels are stored left‑to‑right, top‑to‑bottom, with each pixel occupying four consecutive values (R, G, B, A). For a 2×2 region the data array looks like:

Extracting the pixel array:

var image = this.ctx.getImageData(startX, startY, imgWidth, imgHeight);
let imageData = image.data;
let res = [];
for (let i = 0; i < imageData.length; i += 4) {
    res.push([imageData[i], imageData[i+1], imageData[i+2], imageData[i+3]]);
}
for (let i = 0; i < res.length; i++) {
    let x = (i % imgWidth) + 1;
    let y = Math.ceil(i / imgHeight) || 1;
    let point = res[i];
    this.particles.push(new Particle(startX + x, startY + y, `rgba(${point[0]}, ${point[1]}, ${point[2]}, ${point[3]})`));
}

After building the particle array, the animation loop follows these steps:

Calculate each particle’s position and color.

Set up an animation trigger (click, timer, etc.).

Enter the requestAnimationFrame loop.

In each frame, draw every particle and update its next position using motion formulas.

Repeat for the next frame.

Checking Particle Effect Performance

Running the code in Chrome reveals occasional frame drops. A frame rate (fps) below 24 fps feels choppy; the ideal is 60 fps (≈16.7 ms per frame).

Chrome’s Performance panel shows that most time is spent in the fillRect calls, not in painting.

Optimizing Particle Effects

Method 1: Reduce Loop Iterations

Skip two out of every three particles by incrementing the loop counter by 3. Visual quality remains acceptable while fps rises above 40.

Method 2: Off‑Screen Canvas Rendering

Create an off‑screen canvas, draw each frame there, then copy the result to the on‑screen canvas with drawImage. In this case the method proved slower because fillRect still dominates execution time.

Method 3: Use createImageData and putImageData

Manipulate the pixel buffer directly with a Uint32Array, avoiding per‑particle fillRect calls.

var image = _this.ctx.getImageData(0, 0, _this.w, _this.h);
var buffer32 = new Uint32Array(image.data.buffer);
for (let x = 0; x < _this.w; x++) {
  for (let y = 0; y < _this.h; y++) {
    var color = buffer32[y * _this.w + x];
    if (color) {
      _this.particles.push(new Particle(x, y, color));
    }
  }
}
var imageData = this.ctx.createImageData(this.w, this.h);
var pixels = new Uint32Array(imageData.data.buffer);
this.particles.forEach(function(p) {
  var x = Math.round(p.x);
  var y = Math.round(p.y);
  if (x >= 0 && x < _this.w && y >= 0 && y < _this.h) {
    pixels[x + _this.w * y] = p.color;
  }
  if (_this.tick > settings.startDelay) {
    p.move(_this.tick);
  }
});
this.ctx.putImageData(imageData, 0, 0);

This approach eliminates the heavy fillRect cost, keeping fps above 55 and reducing paint time to near zero.

Dealing with Measurement Interference

Opening Chrome’s Performance panel itself adds overhead, making the animation appear slower. For lightweight fps checks, manually count requestAnimationFrame calls and compute fps as frames / (endTime - startTime), then display the value in the DOM.

Adaptive Effect Degradation

Based on the measured fps, compute a "smoothness index" (fps/60). Scale the number of particles emitted each frame by this index to gracefully degrade on low‑end devices.

Summary

Creating a smooth particle effect involves four steps:

Use pixel manipulation to obtain the initial particle set.

Calculate each particle’s next position per frame.

Update the particle set and render.

Optionally apply performance‑based degradation.

References

[1]

Mozilla documentation: https://developer.mozilla.org/zh-CN/docs/Web/API/ImageData [2] Uint8ClampedArray: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray [3] Related article: https://www.cnblogs.com/xiaohuochai/p/9182710.html [4] TypedArray prototype: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#%E5%B1%9E%E6%80%A7_2 [5] Online demo: https://codepen.io/fecoder2019/pen/abojGqP?editors=1010