Home/ Questions/Q 8536275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T10:37:28+00:00

This may seem innocuous, but when doing it 1000+ times at 30 frames per

  • 0

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);

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    enter image description here

    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()

    • 0