How can I optimize a full-screen canvas rain animation to reduce GPU load while maintaining smooth performance?

Avoid GPU state changes

The only space for improvement is in the render loop.

The general rule of thumb is to avoid GPU state changes. Calls to ctx.stroke and ctx.fill force GPU state changes.

This means that data (style and path to stroke) is moved from the CPU to the GPU.

As all the strokes in your code are the same style you can render the whole scene in one call to ctx.stroke.

Code Changes

Thus the change around the inner loop would be as follows

JAVASCRIPTCopied
  ctx.beginPath();  // ADDED. Do only once per loop
  drops.forEach(drop => {

    // REMOVED ctx.beginPath();
    ctx.moveTo(drop.x, drop.y);
    ctx.lineTo(drop.x, drop.y + drop.length);

    // REMOVED ctx.stroke();
    drop.y += drop.speed;
    if (drop.y > canvas.height) { drop.y = -drop.length }
  });
  ctx.stroke(); // ADDED. Do once for all rain drops

Depending on the device, setup, GPU and number of drops this can provide a significant performance boost.

Note that if each stroke needed a different color/style you can group strokes with the same style and render each group with only one draw call (stroke and or fill)

To ease the loop, we could separate the logic into two different requestAnimationFrame() and compare the time for triggers.

By doing so we get an interval loop without using setInterval, so if something is going to throttle down, the frame will be skipped anyway, and not be enqueued.

In this example, i have slow down the animation to 200 milliseconds by frame for the demo.

Maybe implementing a variable instead of that 200 could give a great rain effect ;)

JAVASCRIPTCopied
const canvas = document.getElementById('rainCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const numDrops = 500;
const drops = [];
for (let i = 0; i < numDrops; i++) {
  drops.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    speed: 2 + Math.random() * 4,
    length: 10 + Math.random() * 10
  });
}

function drawRain() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";
  ctx.lineWidth = 2;
  
  drops.forEach(drop => {
    ctx.beginPath();
    ctx.moveTo(drop.x, drop.y);
    ctx.lineTo(drop.x, drop.y + drop.length);
    ctx.stroke();
    drop.y += drop.speed;
    if (drop.y > canvas.height) {
      drop.y = -drop.length;
    }
  });
  
  //requestAnimationFrame(drawRain);
}

//drawRain();

/* Timer loop ----------------------------------------*/
var job, origin = new Date().getTime(), i = 0;

const timer = () => {
  if (new Date().getTime() - i > origin){
   requestAnimationFrame(drawRain)
   i = i + 200 // ms
   job = requestAnimationFrame(timer)
  } else if (job !== null){
      requestAnimationFrame(timer)    
  }
}

requestAnimationFrame(timer)

const stop = () => job = null

CSSCopied
body, 
html { 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  background-color: black
}

canvas { 
  display: block 
}

button {
  z-index: 1;
  position: fixed;
  top: 0
}

HTMLCopied
<canvas id="rainCanvas"></canvas>

<button onclick="stop()">STOP</button>

Run code snippetHide resultsExpand snippet

Source from my snippet here, and more infos:

How can I use setInterval and clearInterval?