2D Canvas and Multiplayer Games - WebGL Game Development - page 354

Then, we draw our power bar based on the value of power using the following code:
this.ctx.fillStyle = this.powerColor;
this.ctx.fillRect(0, this.canvas.height-60,
this.power*this.ctx.canvas.width/this.fullPower, 30);
Using a square geometry
We will use the same class, SquareGeometry , that we created in Chapter 9 , Ray
Casting and Filters . Let's quickly refresh our memory. Open the SquareGeomtery.js
file from client/primitive . The following code snippet is present in this file:
SquareGeometry = inherit(Geometry, function ()
{
superc(this);
this.vertices=[
-1.0,-1.0,0.0,//0
1.0,-1.0,0.0,//1
-1.0, 1.0,0.0,//2
1.0, 1.0,0.0//3
];
var uvs=[ 0.0, 0.0,
1.0, 0.0,
0.0, 1.0,1.0,1.0];
var normal = vec3.fromValues( 0, 0, 1 );
var face = new Face();
face.a=0;
face.b=1;
face.c=2;
//...
var face = new Face();
face.a=2;
face.b=1;
face.c=3;
//...
});
The class first defines four vertices and four texture coordinates. Then, it creates two
faces (triangles) using vertex indices (0, 1, 2) for the first triangle and indices (2, 1, 3)
for the second triangle.