In this WebGL script I have drawn the entire canvas in one color. This is the simplest example so we can go through the most basic part, initialization. There are 2 necessities for you to run WebGL:

• A browser supporting WebGL1 or WebGL2.
• Html5 support (for the canvas element).

When both are available, you can start developing for WebGL. The first thing we will create is the html, which can be very minimal as shown below. An option you might want to consider at this point is the size of the canvas. Let's keep it simple for now and go with a static size. Replace the canvas element in your html with the following line: You can set the width and height to anything you like. Let's continue with the JavaScript part of initializing WebGL.

Our first order of business will be getting the canvas element so we can use it throughout our JavaScript file. Luckily we can use functions to search the document for us to get the element with the correct id: The next thing we need to do is initialize WebGL. We will also use a predefined function for this. Note that you can also get the context for WebGL 1 by uncommenting the lowest line. The last thing we want to do is clear the screen with our favorite background color. To do this we need to define the color WebGL will use to clear the screen, and then tell WebGL to actually clean it. This is done (in that order) by adding the following 2 lines to our myWebGL.js file. Adding all of the lines together, our myWebGL.js file should like something like this: You will also notice that I have added a check on the initialization of WebGL. This check will notify users if their browser does not support webgl. I have also added a main function that is immediately executed so we can return prematurely if the WebGL initialization failed.

A black background is somewhat boring, so we can add a different color instead. To change the background color we could also overwrite the color used when clearing the screen. The clear color is controlled by the line gl.clearColor(0.0, 0.0, 0.0, 1.0); Changing the parameter values will modify the color. Keep in mind that the values are Red, Green, Blue and Alpha (RGBA). The values go from 0.0 up to 1.0. A simple calculation can get you your perfect color from the 0 - 255 RGBA values: value = (1 / 255) * rgbValue; This calculation has to be done for every color channel (RGBA).

Here is my background color:

All our hard work boils down to this static screen with a single color. It is not much to look at, but after the next few blog posts, the true power of WebGL will finally arise. Let's enjoy the view for now. Clicking on the WebGL window above will open it full-screen. And don't forget that you can view the source code by pressing 'F12' if you get stuck along the way and need to see the working example.