Canvas arc() vs drawImage()

Question

This may seem innocuous, but when doing it 1000+ times at 30 frames per second, it does add up. I have 3 sizes of circles that I draw, each with their own fill color (RGBA). Is it faster for me to draw them as images once, and use drawImage() with the data URLs, or to do arc() for each of them?

Extra information:

• Using a single canvas for all circles
• Context and canvas are cached

• Full call for arc at the moment looks like

  this.scene.context.arc(newLocation, this.y+=this.speed/80, this.distance / 2, 0, Math.PI*2, false);

Answer 1

According to my tests, drawImage() is going to be significantly faster in most cases than using arc().

The drawImage() function can take either an <img> or <canvas> element as its parameter, and in Firefox, using an <img> tag was faster, though other browsers showed the opposite.

What it boils down to: Even for simple shapes, use drawImage()

Answer 2

drawImage() is faster, but only in Firefox.

There's a trick that gives the same performance in Chrome as drawImage() gives in Firefox:

const drawCircle = function(ctx, x, y, radius) {
  ctx.lineWidth = radius * 2;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x, y);
  ctx.stroke();
}

In Chrome 84, this method using round line caps is about 3x faster than anything else:

Interestingly, Firefox 79 is the exact opposite: that trick turns out to be the slowest option, with arc being only a bit faster.

The tests I used are here.