Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Canvas2D API in WebGL
branch: master

This branch is 1 commit ahead of corbanbrook:master

If a webgl-2d context is requested in a browser without webgl support…

…, return a normal 2d context instead. webgl-2d contexts have an isWebGL property to let you know that you got a GL context.

Use premultiplied alpha instead of normal alpha blending. Fixes ringing/color bleeding artifacts around scaled images.
Implement the source-over, copy and lighter globalCompositeOperations. Warn about unsupported globalCompositeOperations.
Implement globalAlpha.
Handle a canvas being passed to drawImage instead of an image.
Allow invalidating the contents of webgl-2d's cached texture by setting 'isDirty=true' on the source image/canvas.
latest commit 7199405e71
@kg authored
Failed to load latest commit information.
benchmarks Adding Kevin Roast's asteroidsbench to benchmark suite.
support Added JSLint to support dir and linted source.
Makefile Updated Makefile to work with test suite. Adding new supported functions to README.


HTML5 Canvas2D API in WebGL.


This project aims to be a complete port of the Canvas2D API implemented in a WebGL context. WebGL-2D is a proof of concept and attempts to ascertain performance improvements over Canvas2D.

It should allow most Canvas2D applications to be switched to a WebGL context.

Check out a LIVE DEMO!



Switching your Canvas2D sketch to a WebGL2D is very simple and only requires one additional line of code:

var cvs = document.getElementById("myCanvas");

WebGL2D.enable(cvs); // adds "webgl-2d" context to cvs

var ctx = cvs.getContext("webgl-2d"); // easily switch between "webgl-2d" and "2d" contexts

Supported Canvas2D Features

WebGL-2D is a work in progress and currently supports a very small subset of the Canvas2D API.

  • strokeStyle
  • fillStyle
  • strokeRect
  • fillRect
  • translate
  • rotate
  • scale
  • save
  • restore
  • lineWidth
  • drawImage
  • createImageData
  • getImageData
  • putImageData
  • beginPath
  • closePath
  • moveTo
  • lineTo
  • rect
  • fill*
  • stroke*

*fill and stroke only work on straight line paths supported above, arc, and curves are not yet supported.

All other properties or functions are currently stubbed. Properties are set to their defaults and functions are empty.


WebGL-2D should be faster than Canvas2D at certain things and slower at others. It is important that you know what to expect when using WebGL-2D with your project.

The benchmarks directory contains benchmarks for testing performance


Kevin Roast has graciously given permission to include this benchmark in the WebGL-2D project.

This benchmark is perfect for testing real world canvas usage in game engine. It relies heavily on 9 arg drawImage cropping to implement scrolling backgrounds and stripstrip animations.

Visit his website for other HTML5 canvas demos as well as the asteroids game

Something went wrong with that request. Please try again.