Get to know MDN better
This tutorial describes how to use the <canvas> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas of what you can do with WebGL and will provide code snippets that may get you started in building your own content.
WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML <canvas> in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code (shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.
Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The <canvas> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.
How to set up a WebGL context.
Adding 2D content to a WebGL contextHow to render simple flat shapes using WebGL.
Using shaders to apply color in WebGLDemonstrates how to add color to shapes using shaders.
Animating objects with WebGLShows how to rotate and translate objects to create simple animations.
Creating 3D objects using WebGLShows how to create and animate a 3D object (in this case, a cube).
Using textures in WebGLDemonstrates how to map textures onto the faces of an object.
Lighting in WebGLHow to simulate lighting effects in your WebGL context.
Animating textures in WebGLShows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.
This page was last modified on Feb 19, 2023 by MDN contributors.
Your blueprint for a better internet.
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.