Click here to Skip to main content
13,344,508 members (52,163 online)
Click here to Skip to main content
Add your own
alternative version


7 bookmarked
Posted 12 Jul 2012

Let's Do Basic Graphics on the Browser

, 19 Jul 2012
Rate this:
Please Sign up or sign in to vote.
An introduction to WebGL and basic graphic programming using JavaScript.


Let's imagine a world without Google. Of course we have to use Microsoft for everything which, trust me, is not a good thing (my bread and butter comes from Microsoft technologies). Today I would like to start a topic on WebGL and from where it started.

We would start from simple computer graphics jargons and terminology and would extend that to create a 3D based webpage. But for this I assume that the readers are at least familiar with JavaScript and HTML and can do a bit of programming. For the graphics part, I would do the explanation and how it's all related and would try to give the whole picture and how all of this (JavaScript/HTML/3D) comes together.

For better productivity and similar results I would suggest to use the Komodo IDE for Windows or for Unix if you all are coming from Unix/Linux. So let's get started.....

As the name suggests WebGL stands for Web Graphics language. It is a derivative from OpenGL and it's specific to web development. Though OpenGL is a standard language for graphics programming using C++/C# due to its memory management, pointers, people usually shy away from graphics programming.

But WebGL is all about to change that. Let's say WebGL is OpenGL on steroids. A lot of things has been taken away to maintain simplicity and a new scripting language has been given the power of conventional OOPs language functionality.

Getting Started

Why WebGL???

I have met a lot of people who do not see this in a big way. But I assure you it's something very new and will take everything by its storm. Just think of a web based application which does not require any plug-in or third party support like FlashPlayer, Silverlight, or is proprietary. This is what WebGL can do and could replace all as it an extension to JavaScript using a graphics library (JavaScript API).

All you require is an HTML5 compatible browser.. Yes sir, that's all that is required.

(Note: IE 8.0/9.0 does not fully support HTML5 in shorter words......... in detail I meant to see it does not support 3D functionality using JavaScript on the web browser as Microsoft is busy selling Silverlight over HTML5 (Canvas) (as they think the world belongs to them..).

Did I say Canvas.........?????

If you are reading this completely and suddenly you think what in the name of god is Canvas.

But let me tell you folks, it's where we would be drawing. As the name implies "Canvas" is an element of HTML, just like any other element. Take Canavs as a viewport or a section of a screen where you can perform drawing, paint, scale, rotate, and do some serious stuff. Just imagine you could write a Photoshop application using this and could earn millions... (well that's my plan). A simple canvas would look like:

<canvas id="canvas_id" width="400" height="600" >
Canvas Not Supported On your Browser...I know Its IE...

Anyway if your browser does not support this tag then you will get the message. This is done internally and much is required as the element can decide whether they are supported or not.

This is what makes HTML5 so special. And because of it the industry is so much divided upon. Microsoft says it's not secure enough as people can change, steal code or images, or would be meant to perform some illegal things..... But let me tell you folks "The more you share, the less you have to hide".

Open and see the new thing that could change the world....just think, would you like to do things your way and be flexible and become a Jedi or be forced to do the dark way where you know where the road ends...

Let's see how to start WebGL.......we would write a simple code to test whether WebGL is supported on our browser or not. Canvas has two major is 2D and the other is 3D accelerated with hardware rendering support......

<!DOCTYPE html> 
<script type="text/javascript" >
( function () 
var check,context;
check = document.createElement('canvas');
alert(" Canvas Not suppoted On your Browser ");
alert(" Canvas Not suppoted On your Browser ");
} ) ();

This code is self explanatory and this code will test whether your browser is HTML5 compliant or not and if it is, whether it supports the most important element "Canvas" that distinguishes HTML5 from others. If it supports Canvas then you can enhance the code to check for properties related to Canvas on 2D and 3D drawing.

check.getContext('2d') // 2D canvas rendering
check.getContext('webgl') or check.getContext('experimental-webgl') // For 3d Canvas Rendering

Just recall, you might have played Angry Birds on a Google Chrome browser. is made on 2D Canvas and Chrome heavily supports HTML5 and its specification.. And Angry Birds in HD is written on 3D accelerated canvas.

Note: Always use Google Chrome/Chromium or Mozilla Firefox latest build. Remember, WebGL requires a supported graphics card which can also support OpenGL functionalities such as T&L, shaders, hardware rendering. However, you can use a 2D canvas. But use of three 3d requires a graphics card. In some cases, software based rendering has also been supported and you need to check the browser specification. Please keep this in mind. It's just like a full 3D based game which requires a graphics card and since WebGL is supposed to do the same in terms of graphics, it also requires some part of it.

So now you know how to check for functionalities first and now let's draw something... Before drawing, there is something you should understand first. There is always some process to before you make omelet you need to heat the pan, add oil, break the eggs, and make something out of it.... Just like this there are some processes to drawing..... you need to define the shape, its border, border color, the fillcolor that will fill the figure, shape, and size, and then you have to draw it. If you keep these small steps in mind you will find graphics programming a lot easier. Once you define these properties anywhere, you just need to call draw() to render it on the screen. This is what graphics programming is all about.

Let's do some graphics

<!DOCTYPE html> 
<script type="text/javascript" >
(function () 
var check;
check = document.createElement('canvas');
alert(" Canvas Not suppoted On your Browser ");
var element,context;
element = document.getElementById('canvas_draw');
context= element.getContext('2d');
// But first lets Define Some Colors
// Lets draw some Rectangle using 2D canvas
context.fillRect(0,0,150,75); // where first 2 parameters stand for x,y and the next 2 are lenght and width
// Using RGB 
context.fillStyle = "rgb(200,0,0)";
context.fillRect (10, 10, 55, 50);
// Using color Name
context.fillStyle = "red"
context.fillRect (10, 10, 55, 50);
alert(" Canvas Not suppoted On your Browser ");
} ) ();
<canvas id="canvas_draw" >
Canvas Not Supported


Using the code

Use the code in any Notepad editor. I usually use KOMODO IDE for development. If you encounter any error in your code please mail me at siddmegadeth at gmail dot com. If you like it please let me know. I would soon be posting an article on WebGL and would show you how to draw more shapes and sizes. In the next topic I would cover rotate, scale, crop, drawing a primitive shape and user defined shape, with code explanation. Today's topic only covered an introduction to WebGL and its usage. I am pretty sure enjoyed reading. Looking forward to your feedback and your response.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Siddharth Chandra
India India

Hope you all are doing great.
i have worked and have hands on exprience various technologies.
But the one i love most are HTML5,AngularJS,Cordova,Bootstrap.
i have 10+ yrs of experience in building Enterprise level applications
based on emerging technologies.
Currently i am mostly dedicated towards nodejs and as a mean stack developer.
I have also worked on embedded software and graphics technologies.

My interest is in simple Human Machine Interface.

Please feel to drop me an email
please do let me know of your valuable suggestion for improving articles
and feedback.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Madhan Mohan Reddy6-Aug-12 23:35
memberMadhan Mohan Reddy6-Aug-12 23:35 
GeneralRe: My vote of 5 Pin
Siddharth Chandra13-Aug-12 3:34
memberSiddharth Chandra13-Aug-12 3:34 
GeneralRe: My vote of 5 Pin
Madhan Mohan Reddy15-Aug-12 23:17
memberMadhan Mohan Reddy15-Aug-12 23:17 
GeneralRe: My vote of 5 Pin
Siddharth Chandra22-Aug-12 0:40
memberSiddharth Chandra22-Aug-12 0:40 
GeneralRe: My vote of 5 Pin
Madhan Mohan Reddy22-Aug-12 18:48
memberMadhan Mohan Reddy22-Aug-12 18:48 
GeneralTwo small suggestions: Pin
Tefik Becirovic13-Jul-12 1:04
memberTefik Becirovic13-Jul-12 1:04 
GeneralRe: Two small suggestions: Pin
Siddharth Chandra13-Jul-12 2:23
memberSiddharth Chandra13-Jul-12 2:23 
GeneralRe: Two small suggestions: Pin
Tefik Becirovic19-Jul-12 0:38
memberTefik Becirovic19-Jul-12 0:38 
GeneralRe: Two small suggestions: Pin
Siddharth Chandra16-Jul-12 2:47
memberSiddharth Chandra16-Jul-12 2:47 
GeneralRe: Two small suggestions: Pin
Tefik Becirovic19-Jul-12 1:16
memberTefik Becirovic19-Jul-12 1:16 
Questionctx Pin
Sean Fuller12-Jul-12 5:38
memberSean Fuller12-Jul-12 5:38 
AnswerRe: ctx Pin
Siddharth Chandra12-Jul-12 21:32
memberSiddharth Chandra12-Jul-12 21:32 
AnswerRe: ctx Pin
Siddharth Chandra19-Jul-12 0:57
memberSiddharth Chandra19-Jul-12 0:57 
QuestionCorrent ID Submission Pin
Siddharth Chandra12-Jul-12 4:29
memberSiddharth Chandra12-Jul-12 4:29 
use document.getElementbyId('canvas_draw'); instead of

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 19 Jul 2012
Article Copyright 2012 by Siddharth Chandra
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid