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: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: Safari 16
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-01-03 07:32 PST by Matt Sephton
Modified: 2023-05-23 09:18 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
View All Add an attachment (proposed patch, testcase, etc.)

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.
Comment 6 Matt Sephton 2023-03-29 15:53:10 PDT 
Sadly just noticed this again in 2023.
Comment 7 Matt Sephton 2023-05-23 09:18:18 PDT 
Good News

- macOS 12.6.6
- MBP M1 Pro

Safari 16.5 = <2ms
Chrome 113  = <20ms

Closing as resolved.