Clearing A WebGL Canvas To A Colour

Your browser does not support the canvas tag. This is a static example of what would be seen.

As a long term user of graphics APIs I'm really excited by the sort of content we might see in the future as people find more and more interesting ways to harness the power of the GPU to fill web pages with all manner of complex interactive content.

I don't have anything specific in mind but I wanted to learn about WebGL and keep a record of what I discover along the way... and this is hopefully the first is a small series of posts where I cover the basics of getting a WebGL context up and running, and building the basics of a rendering pipeline in a browser.

Everything starts somewhere... and usually with desktop graphics coding you start by building a window and clearing it to a colour (or I do at least) just to prove that you have taken over the rendering environment correctly and that the basics of interacting with the GPU are working as expected, and so the most simple WebGL example is probably therefore to take a blank HTML canvas, grab a WebGL context from it and clear it to a colour, which is what I'll do here.

For anyone not at all familiar with HTML, we first need to create a canvas. Adding this to any HTML document gives you the blank canvas we need for WebGL rendering. In this case the canvas is 256 pixels tall and 256 pixels wide. For now we don't need it to do anything more the exist, and to have a name we can use to reference it.

<canvas id="gl_greenSquare" width="256" height="256"></canvas>

Then to complete our simple example, adding this small snippet of javascript adds our WebGL code.

var loadIntoCanvas = function(canvas, client_onLoad, client_onRender) {

  var initialWidth = 0
  var initialHeight = 0;

  function setCanvasSize() {

    /* match the canvas size to the containing div */
    var parentSize = canvas.parentNode.parentNode.getBoundingClientRect();
    if (parentSize.width < initialWidth) {
      canvas.width = initialWidth / 2;
      canvas.height = initialHeight / 2;
    } else {
      canvas.width = initialWidth;
      canvas.height = initialHeight;

  /* called when the canvas needs to be redrawn */
  function onRender(gl) {

    /* update the canvas size */

    /* redraw the canvas */
    client_onRender(gl, canvas);

  /* called when the canvas is first loaded */  
  function onLoad() {

    /* initialise WebGL */	
    var gl = canvas.getContext("webgl"); 
    if (gl == null)
      gl = canvas.getContext("experimental-webgl"); 

    /* initial update of the canvas size */
    initialWidth = canvas.width;
    initialHeight = canvas.height;

    /* give the client a chance to initialise against the gl context */
    client_onLoad(gl, canvas);

    /* trigger a redraw (and a canvas resize whenever a resize occurs */
    window.addEventListener('resize', function() { onRender(gl); }, false);

    /* initial render of the canvas */



  function(gl, canvas) {
    /* setup would go here */
  function(gl, canvas) {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0.0, 1.0, 0.0, 1.0);

This could have been implemented using less code than is shown here, but I'm trying to do things "properly" and to make sure things are re-usable. What I've done here is to build a small number of functions that manage the canvas and the GL context for me and wrapped those in a function. This allows an instance of that function to be bound to the canvas and the instance can hold it's own state meaning I can bind against multiple contents and set different parameters if needed.

The code first records the initial canvas size, before attempting to fit it to it's parent container. Then it hooks a listener to the resize event so that we can redraw the canvas when the window is resized, and then finally it does the initial render. The resize handler also attempts to choose a new size for the canvas such that it hopefully can be made to fit into it's container, so maybe on mobile phones or other devices with small screens we get a canvas thats half the size.

We use a pair of callbacks to allow the client code to load or setup any GL assets (e.g textures, etc) though we don't need any of that here, and to execute the redraw, which in this cases just needs to clear the cavas to solid green.

Javascript code can be embedded into a HTML document directly by wrapping in a script block, like so:

<script type="text/javascript">
  ... insert WebGL code here

Leave a Reply

Your email address will not be published. Required fields are marked *