Professional JavaScript for Web Developers P552
Basic Usage
The <canvas> element requires at least its width and height attributes to be set in order to indicate the size of the drawing to be created. Any content appearing between the opening and closing tags is fallback data that is displayed only if the <canvas> element isn‘t supported.
To begin with drawing on a canvas, you need to retrieve a drawing context. A reference to a drawing context is retrieved using the getContext() method and passing in the name of the context. For example, passing "2d" retrieves a 2D context object:
1 var drawing = document.getElementById("drawing");
2
3 // make sure <canvas> is complet supported
4 if (drawing.getContext) {
5 var context = drawing.getContext("2d");
6 }
The coordinates in a 2D context begin at the upper-left of the <canvas> element, which is considered point(0, 0). All coordinate values are calculated in relation to that point. By default, the width and height indicate how many pixels are available in each direction.
Fills and Strokes
Fill automatically fills in the shape with a specific style (color, gradient, or image) while stroke colors only the edges. Most of the 2D context operations have both fill and stroke variant, and how they are displayed is based on a couple of properties: fillStyle and strokeStyle.
Both properties can be set to a string, a gradient object, or a pattern object. A string value indicates a color defined using one of the various CSS color formats: name, hex code, rgb, rgba, hsl, or hsla.
Drawing Rectangles
There are three methods for working with rectangles: fillRect(), strokeRect(), and clearRect(). Each of these methods accepts four arguments: the x-coordinate of the rectangle, the y-coordinate of the rectangle, the width of the rectangle, and the height of the rectangle. Each of these arguments is considered to be in pixels.
The fillRect() method is used to draw a rectangle that is filled with a specific color onto the canvas. The fill color is specified using the fillStyle property, for example:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script>
7 window.onload = function () {
8 var drawing = document.getElementById("drawing");
9
10 // make sure <canvas> is complet supported
11 if (drawing.getContext) {
12 var context = drawing.getContext("2d");
13
14 // draw a red rectangle
15 context.fillStyle = "#ff0000";
16 context.fillRect(10, 10, 50, 50);
17
18 // draw a blue rectangle that‘s semi-transparent
19 context.fillStyle = "rgba(0, 0, 255, 0.5)";
20 context.fillRect(30, 30, 50, 50);
21 }
22 }
23 </script>
24 </head>
25 <body>
26 <canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
27 </body>
28 </html>
You can earse an area of the canvas by using the clearRect() method. This method is used to make an area of the drawing context transparent. Here is an example:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script>
7 window.onload = function () {
8 var drawing = document.getElementById("drawing");
9
10 // make sure <canvas> is complet supported
11 if (drawing.getContext) {
12 var context = drawing.getContext("2d");
13
14 // draw a red rectangle
15 context.fillStyle = "#ff0000";
16 context.fillRect(10, 10, 50, 50);
17
18 // draw a blue rectangle that‘s semi-transparent
19 context.fillStyle = "rgba(0, 0, 255, 0.5)";
20 context.fillRect(30, 30, 50, 50);
21
22 // clear a rectangle that overlaps both of the previous rectangles
23 context.clearRect(40, 40, 10, 10);
24 }
25 }
26 </script>
27 </head>
28 <body>
29 <canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
30 </body>
31 </html>
Drawing Paths
Paths allow you to create complex shapes and lines. To start creating a path, you must first call beginPath() to indicate that a new path has begun. After that, the following methods can be called to create the path:
- arc(x, y, radius, startAngle, endAngle, counterclockwise)
- arcTo(x1, y1, x2, y2, radius)
- be