WebGl-2d.js: Implementing the Canvas 2D API on WebGL

Original author: Devon Govett
  • Transfer
WebGL-2d is a very interesting javascript library that implements standard methods for working with a 2d Canvas context on a WebGL context.

It's no secret that today Canvas cannot boast of good performance and rendering complex scenes in real time can be a problem. With WebGL, the performance situation is much better, but not all popular browsers support this standard , in particular Microsoft does not even plan to implement its support in IE (third-party developers for this reason have already started making the plugin ).

By connecting WebGL-2d and adding just a couple of lines, we can significantly accelerate the graphics rendering implemented with the Canvas 2d API in browsers that support WebGL and provide fallback to the usual 2d context.



Fortunately, browser developers are working on the issue of Canvas graphics performance, there is support for hardware acceleration for 2D contexts, so in the near (hopefully) future this library will not be in demand, but today it definitely must have.

An example of initializing WebGL-2d and getting context: The project repository is on GitHub .

var cvs = document.getElementById("myCanvas");
WebGL2D.enable(cvs);
var ctx = cvs.getContext('webgl-2d');




Some examples and benchmarks from the repository do not work when opening html files directly (Uncaught Error: SECURITY_ERR: DOM Exception 18 occurs due to the inability to set cookies with this launch pattern), run it on the local web server.

WebGL-2d currently supports the following standard 2d context methods:
  • strokeStyle
  • fillStyle
  • strokeRect
  • fillRect
  • translate
  • rotate
  • scale
  • save
  • restore
  • lineWidth
  • drawImage
  • createImageData
  • getImageData
  • putImageData
  • beginPath
  • closePath
  • moveTo
  • lineTo
  • rect
  • fill *
  • stroke *

* The current release of fill and stroke methods does not support arcs and curves.
Unfortunately, at the moment, the author has thrown up the development of his brainchild (the last commit was made in April 2011), but in any case, the project is worthy of attention.

Also popular now: