I have prepared bundle of very basic tutorials on WebGL to draw points, line,line strip, triangle, triangle strip , rectangle , circle and changing the color of the object drawn on the canvas.

What is WebGL ?

The principles are generic: WebGL is based on OpenGLES 2.0 (OpenGL for Embedded Systems – which is a subset of the OpenGL 2.0 computer graphics rendering application programming interface (API) for rendering 2D and 3D computer graphics).

Webpage using WebGL



Why WebGL ?

Rendering 3D object directly on the web browser.

The tutorials prepared here is tested on Windows 7 with Chrome Version 41.0.2272.118 m.

Click here to check the work samples live Demo.

Beginners guide to WebGL

Sample Output


To draw Point : Click any where on the canvas

To draw Line: Click the starting point and drag until endpoint

To draw Triangle: Click three points to define three edge of triangles. It will draw triangle for you.

To draw Rectangle: Drag the mouse and will form rectangle.

To draw Circle: Drag the mouse and will form circle.

To draw Triangle Fan: Define four points with four clicks.

To draw line strip : Define points and drag .

Download All Here

Comments are Welcome !