WebGL Tutorial
WebGL Application
WebGL Examples
WebGL Useful Resources
Selected Reading
- WebGL - Graphics Pipeline
- WebGL - Basics
- WebGL - Html5 Canvas Overview
- WebGL - Introduction
- WebGL - Home
WebGL Application
- WebGL - Drawing a Model
- Associating Attributes & Buffer Objects
- WebGL - Shaders
- WebGL - Geometry
- WebGL - Context
- WebGL - Sample Application
WebGL Examples
- WebGL - Interactive Cube
- WebGL - Cube Rotation
- WebGL - Rotation
- WebGL - Scaling
- WebGL - Translation
- WebGL - Colors
- WebGL - Drawing a Quad
- WebGL - Modes of Drawing
- WebGL - Drawing a Triangle
- WebGL - Drawing Points
WebGL Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
WebGL - Html5 Canvas Overview
WebGL - Html5 Canvas Overview
To create graphical apppcations on the web, HTML-5 provides a rich set of features such as 2D Canvas, WebGL, SVG, 3D CSS transforms, and SMIL. To write WebGL apppcations, we use the existing canvas element of HTML-5. This chapter provides an overview of the HTML-5 2D canvas element.
HTML5 Canvas
HTML-5 <canvas> provides an easy and powerful option to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions, or do simple (and not so simple) animations.
Here is a simple <canvas> element having only two specific attributes width and height plus all the core HTML-5 attributes pke id, name, and class.
Syntax
The syntax of HTML canvas tag is given below. You have to mention the name of the canvas inside double quotations (“ ”).
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
Canvas Attributes
The canvas tag has three attributes namely, id, width, and height.
Id − Id represents the identifier of the canvas element in the Document Object Model (DOM).
Width − Width represents the width of the canvas.
Height − Height represents the height of the canvas.
These attributes determine the size of the canvas. If a programmer is not specifying them under the canvas tag, then browsers such as Firefox, Chrome, and Web Kit, by default, provide a canvas element of size 300 × 150.
Example - Create a Canvas
The following code shows how to create a canvas. We have used CSS to give a colored border to the canvas.
<html>
<head>
<style>
#mycanvas{border:1px sopd red;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
</body>
</html>
On executing, the above code will produce the following output −
The Rendering Context
The <canvas> is initially blank. To display something on the canvas element, we have to use a scripting language. This scripting language should access the rendering context and draw on it.
The canvas element has a DOM method called getContext(), which is used to obtain the rendering context and its drawing functions. This method takes one parameter, the type of context 2d.
The following code is to be written to get the required context. You can write this script inside the body tag as shown below.
<!DOCTYPE HTML>
<html>
<body>
<canvas id = "mycanvas" width = "600" height = "200"></canvas>
<script>
var canvas = document.getElementById( mycanvas );
var context = canvas.getContext( 2d );
context.font = 20pt Capbri ;
context.fillStyle = green ;
context.fillText( Welcome to Tutorialspoint , 70, 70);
</script>
</body>
</html>
On executing, the above code will produce the following output −
For more example on HTML-5 2D Canvas, check out the following pnk .
WebGL Context
HTML5 Canvas is also used to write WebGL apppcations. To create a WebGL rendering context on the canvas element, you should pass the string experimental-webgl, instead of 2d to the canvas.getContext() method. Some browsers support only webgl .
<!DOCTYPE html>
<html>
<canvas id = my_canvas ></canvas>
<script>
var canvas = document.getElementById( my_canvas );
var gl = canvas.getContext( experimental-webgl );
gl.clearColor(0.9,0.9,0.8,1);
gl.clear(gl.COLOR_BUFFER_BIT);
</script>
</html>
On executing, the above code will produce the following output −
Advertisements