HTML and CSS Reference
In-Depth Information
FIGURE 2.10
A simple HTML5
canvas example.
This code creates a blank bitmap image, which you can draw on and manipu-
late using the Canvas API. The magic comes when you target the canvas using
JavaScript via its ID:
var c = document.getElementById('canvas');
Yo u t h e n g e t t h e d r a w i n g c of n t e x t of f t h e c a n v a s — i n t h i s c a s e a t w of - d i m e n s i of n a l
image—using the following line (you can also draw 3D images in
<canvas>
using
We b G L ) :
var context = c.getContext('2d');
Yo u c a n t h e n s t a r t u s i n g p r of p e r t i e s of f t h e c of n t e x t y of u ' v e c r e a t e d t of d r a w of n t of
the canvas. For example:
context.fillStyle = “rgb(0,0,200)”;
context.fillRect (100, 50, 100, 150);
Here you select a blue color and draw a filled rectangle of that color that is
100px by 50px in size at coordinates (100,150) on the canvas. The top-left corner
of the canvas (0,0) is the origin (
Figure 2.10
).
TIP:
Canvas has many more primitives available, such as full-text drawing capabili-
ties and the ability to import images and video frames, among many others. Covering
more of these primitives is beyond the scope of this topic. For good
<canvas>
tutorials, hop on
over to Mozilla's “Canvas tutorial” page
(https://developer.mozilla.org/en/Canvas_tutorial).
For more on WebGL, a good place to start is Luz Caballero's article “An introduction to WebGL”
