1

Having reviewed the various globalCompositeOperation options for drawing on a 2D canvas, it occurs to me that destination-over is essentially the same as the default source-over but with the elements drawn in reverse.

I was wondering if anyone knows whether there's a performance difference between these two operations when the canvas calculates the composition and draws the pixels.

Jared
  • 718
  • 5
  • 11
  • Have you tried to benchmark across various browsers: create a test in jsperf.com and paste the link to your friends – Mikko Ohtamaa Jul 17 '15 at 06:09
  • 1
    JSPerf is still down! I might just try both methods out myself and give it the eyeball test. I'll post my results soon. – Jared Jul 17 '15 at 06:18
  • Aaaaw crap... well that was expected as it was "too easy" to use – Mikko Ohtamaa Jul 17 '15 at 06:21
  • From my test case I couldn't observe any significant difference in performance with a naked eye. In case anyone is curious, for my test I was compositing ~5 1024x768 PNG images per frame onto a 1024x768 canvas with ~50 total similar image textures in memory, on an iPad. Both methods performed equally shakily! Reducing the amount of total image elements in memory brought the frame rate back up. – Jared Jul 17 '15 at 06:35

1 Answers1

0

In case anyone is interested I did set up a jsPerf to test this. According to my tests source-over is actually faster!

jsPerf test can be found here: http://jsperf.com/canvas-source-over-vs-destination-over/2

Jared
  • 718
  • 5
  • 11