Performance cost of changing stroke & fill style?

Is there a performance cost to changing graphics.fillStyle and graphics.strokeStyle?

Imagine that I have a list of 50 basic geometric shapes (e.g. Phaser.Geom.Circle), and each shape should be drawn using one of a fixed set of styles:

  • Style A: 5px red border with black fill
  • Style B: no border with yellow fill
  • Style C: 2px blue border with white fill

If the list of shapes is essentially random, is it worth it to group them before drawing such that I only need to set the stroke style & fill style three times, vs explicitly setting both stroke & fill styles 50 times?


I assume there is a performance cost to stroking and filling shapes, and so e.g. in the case of style B I would want to avoid calling graphics.strokeCircleShape on those items.

I’d guess it’s a small cost. I think the number of draws would make a bigger difference.

2 Likes