110 Chapter 5—Canvas
Now we have defined the drawing context and can start drawing the two rect-
angles. Without going into details of the attribute fillStyle or the method fill-
Rect(), the basic procedure for both is the same: Define the fill color and then
add the rectangle:context.fillStyle = 'red';
context.fillRect(0,0,800,600);
context.fillStyle = 'rgba(255,255,0,0.5)';
context.fillRect(400,200,800,600);The current Canvas specification only defines a 2D context (see HTML Canvas
2D Context specification at http://www.w3.org/TR/2dcontext) but does not rule
out that others, for example 3D, could follow at a later stage. First initiatives in
this direction have already been launched by the Khronos group: In coopera-
tion with Mozilla, Google, and Opera, they are working on a JavaScript interface
called WebGL based on OpenGL ES 2.0 (http://www.khronos.org/webgl). First
implementations of this emerging standard are present in Firefox, WebKit, and
Chrome.
But back to the 2D context: The possibilities of the CanvasRenderingContext2D in-
terface are manifold and certainly well-suited for creating sophisticated applica-
tions. Figure 5.2 shows a simple bar chart, which will accompany us through an
explanation of the first three features of the drawing context: rectangles, colors,
and shadows.Figure 5.2 Bar chart with ten horizontal bars