What is CanvasGL

CanvasGL is a hardware-accelerated HTML5 canvas implementation integrated into WebKit.
As many HTML5 web applications and games heavily use HTML5 canvas elements, the canvas rendering speed in a web browser has quickly become the bottleneck of creating richer user experience. With CanvasGL, mobile HTML5 web applications will have the richness of native applications without requiring non-standard APIs.

Characteristics of CanvasGL

  • CanvasGL implements the full HTML5 canvas element specification leveraging both multi-core CPU and GPU.
  • CanvasGL can be integrated into any WebKit port including WebKit Gtk, WebKit Qt, WebKit EFL and Chromium.
  • CanvasGL is independent of the underlying 2D vector graphics library (e.g., skia or cairo). It is implemented purely with OpenGL 2.0 / OpenGL ES 2.0.
  • CanvasGL is heavily optimized for embedded systems such as smart TVs and STBs.


CanvasGL Smart Batch



Why CanvasGL is Fast

There are four reasons why CanvasGL is fast compared to other HTML5 canvas implementations.

  • CanvasGL minimizes overhead by batching draw calls and dynamically optimizing texture allocation. For instance, the Skia GPU uses OpenGL ES draw calls 1,200 times to draw 600 shadowed circles on the liquid particles test while CanvasGL uses only TWICE.
  • CanvasGL implements only the HTML5 canvas specification. Because CanvasGL is not a general-purpose 2D vector graphics library, it can optimize better with small rendering pipeline.
  • CanvasGL does not perform CPU-intensive tessellations. Instead, CanvasGL uses the stencil buffer provided by OpenGL ES to reduce CPU overhead.
  • CanvasGL has a dedicated painting thread. By offloading canvas rendering requests to a separate thread, the WebKit main thread can process more tasks such as scripting and layout.