Bug 181244 - Poor performance with lots of small drawImage() of sprites into canvas
Summary: Poor performance with lots of small drawImage() of sprites into canvas
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: Safari 11
Hardware: All macOS 10.13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-01-03 07:32 PST by Matt Sephton
Modified: 2021-09-15 06:05 PDT (History)
7 users (show)

See Also:


Attachments
screenshot: safari (438.59 KB, image/png)
2018-01-03 07:32 PST, Matt Sephton
no flags Details
screenshot: safari TP (350.72 KB, image/png)
2018-01-03 07:32 PST, Matt Sephton
no flags Details
screenshot: chrome (498.06 KB, image/png)
2018-01-03 07:32 PST, Matt Sephton
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Matt Sephton 2018-01-03 07:32:26 PST
Created attachment 330385 [details]
screenshot: safari

Summary:
I am drawing many small 8x8 tiles onto the canvas.

I am seeing poor performance in Safari/TP compared to Chrome.

Steps to Reproduce:
Go to : http://www.gingerbeardman.com/pangds/
Press the left/right arrows to change display
Inspect console for timings.


Expected Results:
Drawing should be instantaneous.

Actual Results:
Drawing is very slow.

Seems to be CPU/GPU bound as performance varies between computers.


MBP 10,2 (early 2013; 3.0 GHz Intel Core i7):
Safari 11.0.2 @350ms
Safari TP 46 @450ms
Chrome @65ms


Version:
ProductName:	Mac OS X
ProductVersion:	10.13.2
BuildVersion:	17C88

Safari 11.0.2 (13604.4.7.1.3)
Safari TP 46 11.1 (13605.1.18.2)
Chrome (63.0.3239.108)


<rdar://problem/31834934>
Comment 1 Matt Sephton 2018-01-03 07:32:44 PST
Created attachment 330386 [details]
screenshot: safari TP
Comment 2 Matt Sephton 2018-01-03 07:32:59 PST
Created attachment 330387 [details]
screenshot: chrome
Comment 3 Simon Fraser (smfr) 2018-01-03 22:09:57 PST
Are you drawing from the sprite sheet image into the canvas, or doing a canvas-to-canvas draw?
Comment 4 Tim Horton 2018-01-04 00:04:10 PST
The source is quite straightforward/not minified; it’s Image() to Canvas drawing.
Comment 5 Matt Sephton 2021-09-15 06:05:31 PDT
Interested to spot this again, still a problem in late-2021.