How GCanvas Brings High‑Performance Canvas Rendering to Mobile Front‑Ends

GCanvas provides a JavaScript API compatible with the HTML5 Canvas standard, enabling developers to draw graphics and render animations on mobile platforms with the same experience as H5 Canvas.

GCanvas Overview

GCanvas has evolved in two stages: (1) 2014‑2015 solved poor WebView Canvas performance on Android; (2) since November 2016 it offers native graphics rendering capabilities for front‑end developers.

In short, GCanvas is a cross‑platform, high‑performance graphics engine that follows W3C standards.

W3C compliance – Offers a Canvas‑like JavaScript API.

Cross‑platform – Core written in C++ on top of OpenGL ES, compiled for Android and iOS.

High performance – Bypasses WebView, directly accesses GPU via OpenGL ES, shortening the rendering path.

Architecture

GCanvas consists of three layers: the JavaScript layer (exposes Canvas 2D and WebGL APIs), the plugin layer (bridge, common plugins, system adaptation), and the core rendering library (implements Context2D and WebGL on top of OpenGL ES).

Process

The rendering flow includes initialization (environment detection, view creation, OpenGL setup) and rendering (JavaScript commands are translated into custom command objects and dispatched to the native engine).

Weex Example

<code>&lt;template&gt;
  &lt;div ref="test"&gt;
    &lt;gcanvas ref="canvas_holder" style="width:750;height:750;background-color:rgba(0,0,0,0.1);"&gt;&lt;/gcanvas&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
var GCanvas = require('weex-gcanvas');
var Image = require('weex-gcanvas/gcanvasimage');
module.exports = {
  mounted: function () {
    // 1. Initialize GCanvas
    var ref = this.$refs.canvas_holder;
    var gcanvas = GCanvas.start(ref);
    var ctx = gcanvas.getContext('2d');
    // 2. Render a red rectangle
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 100, 100);
    // 3. Draw a black rectangle
    ctx.fillStyle = 'black';
    ctx.fillRect(100, 100, 100, 100);
    // 4. Draw a circle
    ctx.arc(450, 200, 100, 0, Math.PI * 2, true);
    ctx.fill();
    // 5. Draw an image
    var image = new Image();
    image.onload = function () {
      ctx.drawImage(image, 100, 330);
      ctx.drawImage(image, 400, 330, 225, 75);
    };
    image.src = 'https://www.khronos.org/assets/uploads/ceimg/made/assets/uploads/apis/OpenGL-ES_100px_May16_225_75.png';
  }
};
&lt;/script&gt;
</code>

Running this code in the Weex Playground produces the rendered result shown below.

Performance and Test Cases

GCanvas has been benchmarked against H5 Canvas, showing significant performance gains, especially on older Android versions lacking GPU acceleration. Sample test cases include a 100‑fish animation using the Hilo 2D library and various chart rendering scenarios.

API Coverage

GCanvas implements most Canvas 2D and WebGL methods (e.g.,

fillRect

,

strokeRect

,

arc

,

drawImage

,

getContext

,

createShader

,

useProgram

, etc.). Some APIs are still pending implementation.