CanvasGL is a GPU-accelerated version of WebKit that fully accelerates CSS3 animations and HTML5 2D canvas rendering. It improves performance by reducing unnecessary work, compositing layers with the GPU, and directly using OpenGL ES 2.0. For 2D canvas, it uses a smart batching system and texture atlas to maximize GPU usage and minimize draw calls and state changes. Benchmark tests showed CanvasGL providing animation frame rates 3-10 times faster than other browsers.

1. The fastest GPU-accelerated WebKit

2. CanvasGLis a GPU-accelerated WebKit
that fully accelerates:
CSS3 Animation HTML5 2D Canvas
(Accelerated Composition) (Accelerated 2D Canvas)

3. (1) Accelerated Composition:
• Reduces unnecessary works
 It does not repaint the unchanged layers.
 It composites layers with the GPU.
• Uses Texture Mapper Method
 It removes complicated abstraction layers.
 It uses OpenGL ES 2.0 directly.
•3 ~ 10 times faster than Android default
Browser on CSS Animations

4. (2) Accelerated 2D Canvas:
• Smart Batching System
 It maximizes the GPU and minimizes the CPU.
 It minimizes draw call batch.
• Uses Texture Atlas to remove state changes
• Fully accelerates HTML5 2D Canvas
 Shadow
 Composite operations
 Vector graphics APIs
•Dramatically reduces CPU overhaed

5. What CanvasGLdoes
JavaScript
(Canvas) CanvasGL OpenGL ES CPU GPU
Draw Call
Draw Call
Draw Call
Computing
Draw Call Draw Call Flush
Context
Draw Call

6. What others do (Skia-GPU, Google chrome)
JavaScript
(Canvas) OpenGL ES CPU GPU
Computing
Draw Call Draw Call Context
Computing
Draw Call Draw Call Context
Computing
Draw Call Draw Call Context
Computing Flush
Draw Call Draw Call Context
Computing
Draw Call Draw Call Context

7. SKIA-GPU:
• 2D Graphics Back-end for Chrome Android
• Problems
 calls glDrawSomethings too many times
 changes gl states too many times
 switches FBO too many times
 vector graphics APIs and shadows are really slow
•Increases dramatically CPU overhead

8. Maximizes GPU usage
CanvasGL QuartzGL* Direct2D** SKIA
Draw Call At Once
(Company 100) (Apple) (Microsoft) (Google)
Bitmap Sprite Good Good Good Good
Convex Path Good Good Poor Poor
Concave Path Good Poor Poor Poor
Bitmap Sprite + Path Good Good Good Poor
Path + Different Brush Type Average Poor Poor Poor
Path + Different Shadow Good Poor Poor Poor
Text + Different Draw Call Good Poor Poor Poor
Minimizes CPU usage
CanvasGL QuartzGL Direct2D SKIA
CPU Tessellation No No Yes Yes
GL State Optimization Good Average Average Poor
* ** QuartzGL and Direct2D are proprietary software without source codes.
The results are approximations based on experiments and articles.

9. Liquid Particles
22
8
2
5
1
0 5
10
15
20
25 fps
CanvasGL (Galaxy S2) Default (Galaxy Nexus) Chrome beta (Galaxy Nexus)
iPhone 4S IE9 (Lumia 800)
* Tested on Feb 22, 2012

10. FishIE Tank
37
22
25
53
52
0
20
40
60 fps
CanvasGL (Galaxy S2) Default (Galaxy Nexus) Chrome beta (Galaxy Nexus)
iPhone 4S IE9 (Lumia 800)
* Tested on Feb 22, 2012

11. Asteroids
13
3
3
9
7
0
5
10
15 fps
CanvasGL (Galaxy S2) Default (Galaxy Nexus) Chrome beta (Galaxy Nexus)
iPhone 4S IE9 (Lumia 800)
* Tested on Feb 22, 2012

12. Canvas Test
27
22
7
31
19
0
10
20
30
40 fps
CanvasGL (Galaxy S2) Default (Galaxy Nexus) Chrome beta (Galaxy Nexus)
iPhone 4S IE9 (Lumia 800)
* Tested on Feb 22, 2012

13. For more information
• Developers blog
http://dev.dorothybrowser.com/
• Company 100
http://www.company100.net/