Let’s Call It A Draw(ing Surface)

1.   HTML 5 defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want.

2.   Every canvas has a drawing context , where all the drawing methods and properties are defined. You call its getContext() method to get the context object, you must pass the string "2d " to the getContext() method. Each drawing context remembers its own properties as long as the page is open, unless you do something to reset it. Individual vendors have experimented with their own three-dimensional canvas API s, but none of them have been standardized. The HTML5 specification notes, “A future version of this specification will probably define a 3d context.”

 

3.   There’s a whole group of properties and methods devoted to drawing rectangles:

  a)   The fillStyle property can be a CSS color, a pattern, or a gradient. The default fillStyle is solid black, but you can set it to whatever you like.

  b)   fillRect(x, y, width, height) draws a rectangle filled with the current fill style.

  c)   The strokeStyle property is like fillStyle — it can be a CSS color, a pattern, or a gradient.   

  d)   strokeRect(x, y, width, height) draws an rectangle with the current stroke style. strokeRect doesn’t fill in the middle; it just draws the edges.

  e)   clearRect(x, y, width, height) clears the pixels in the specified rectangle.

 

 

4.   Setting the width or height of a <canvas> element will erase its contents and reset all the properties of its drawing context to their default values. You don’t even need to change the width; you can simply set it to its current value.

 

5.   The canvas is a two-dimensional grid. The coordinate (0, 0) is at the upper-left corner of the canvas. Along the X-axis, values increase towards the right edge of the canvas. Along the Y-axis, values increase towards the bottom edge of the canvas.

 

6.   Each canvas has a path. Defining the path is like drawing with a pencil. To draw straight lines in pencil, you use the following two methods:

  a)   moveTo(x, y) moves the pencil to the specified starting point.

  b)   lineTo(x, y) draws a line to the specified ending point.

  c)  T hese are “pencil” methods — you can call them as often as you like, but you won’t see anything on the canvas until you call one of the “ink” methods.

 

7.   stroke() is one of the “ink” methods. It takes the complex path you defined with all those moveTo() and lineTo() calls, and actually draws it on the canvas. The strokeStyle controls the color of the lines.

 

8.   To draw a line that is only one pixel wide, you need to shift the coordinates by 0.5 perpendicular to the line's direction. For example, if you try to draw a line from (1, 0) to (1, 3) , the browser will draw a line covering 0.5 screen pixels on either side of x=1. The screen can’t display half a pixel, so it expands the line to cover a total of two pixels:

A line from (1,0) to (1,3) is drawn 2 pixels wide But, if you try to draw a line from (1.5, 0) to (1.5, 3) , the browser will draw a line covering 0.5 screen pixels on either side of x=1.5, which results in a true 1-pixel-wide line:

A line from (1.5,0) to (1.5,3) is draw 1 pixel wide

 

9.   To start a new path, you can invoke context.beginPath() . The fillStyle and strokeStyle don’t get reset when you start a new path.

 

10.   You can also draw text on a canvas. Unlike text on the surrounding web page, there is no box model. That means none of the familiar CSS layout techniques are available. The following font attributes are available on the drawing context:

  a)   font can be anything you would put in a CSS font rule. That includes font style, font variant, font weight, font size, line height, and font family.

  b)   textAlign controls text alignment. It is similar (but not identical) to a CSS text-align rule. Possible values are start , end , left , right , and center .

  c)   textBaseline controls where the text is drawn relative to the starting point. Possible values are top , hanging , middle , alphabetic , ideographic , or bottom .

 

11.   The HTML5 specification explains the different text baselines:

The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like आ   are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like Á , ÿ , f , and Ω are anchored, the ideographic baseline is where glyphs like 私 and 達 are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square.

 

12.   Text drawn inside the canvas inherits the font size and style of the <canvas> element itself, but you can override this by setting the font property on the drawing context. The fillText() method draws the actual text.

 

13.   Like every other HTML element on your page, the <canvas> element itself has a computed font size based on your page’s CSS rules. If you set the context.font property to a relative font size like 1.5em or 150%, your browser multiplies this by the computed font size of the <canvas> element itself.

 

14.   A gradient is a smooth transition between two or more colors. The canvas drawing context supports two types of gradients:

  a)   createLinearGradient(x0, y0, x1, y1) paints along a line from (x0, y0) to (x1, y1) .

  b)   createRadialGradient(x0, y0, r0, x1, y1, r1) paints along a cone between two circles. The first three parameters represent the start circle, with origin (x0, y0) and radius r0. The last three parameters represent the end circle, with origin (x1, y1) and radius r1.

 

15.   Once we have a gradient object, we can define the gradient’s colors. A gradient has two or more color stops. Color stops can be anywhere along the gradient. To add a color stop, you need to specify its position along the gradient. Gradient positions can be anywhere between 0 to 1:

my_gradient.addColorStop(0, "black");

my_gradient.addColorStop(1, "white"); 

 

16.   Defining a gradient doesn’t draw anything on the canvas. It’s just an object tucked away in memory somewhere. To draw a gradient, you set your fillStyle to the gradient and draw a shape, like a rectangle or a line.

 

17.   The canvas drawing context defines a drawImage() method for drawing an image on a canvas. The method can take three, five, or nine arguments:

  a)   drawImage(image, dx, dy) takes an image and draws it on the canvas. The given coordinates (dx, dy) will be the upper-left corner of the image.

  b)   drawImage(image, dx, dy, dw, dh) takes an image, scales it to a width of dw and a height of dh, and draws it on the canvas at coordinates (dx, dy) .

  c)   drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) takes an image, clips it to the rectangle (sx, sy, sw, sh) , scales it to dimensions (dw, dh) , and draws it on the canvas at coordinates (dx, dy) .

 

18.   To draw an image on a canvas, you need an image. The image can be an existing <img> element, or you can create an Image() object with JavaScript. Either way, you need to ensure that the image is fully loaded before you can draw it on the canvas. If you’re using an existing <img> element, you can safely draw it on the canvas during the window.onload event. If you’re creating the image object entirely in JavaScript, you can safely draw the image on the canvas during the Image.onload event.

 

19.   Explorercanvas (excanvas.js ) is an open source, Apache-licensed JavaScript library that implements the canvas API in Internet Explorer.

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Dive Into HTML5</title>

  <!--[if lt IE 9]>

    <script src="excanvas.js"></script>

<![endif]-->

</head>

<body>

  ...

</body>

</html>

 There are a few limitations:

 

   a)  G radients can only be linear. Radial gradients are not supported.

   b)  Patterns must be repeating in both directions.

   c)  Clipping regions are not supported.

   d)  N on-uniform scaling does not correctly scale strokes.

   e)  It’s slow.

 

20.   Mouse events are implemented differently in just about every browser:

 

function getCursorPosition(e) {

    var x;

    var y;

    if (e.pageX != undefined && e.pageY != undefined) {

x = e.pageX;

y = e.pageY;

    }

    else {

x = e.clientX + document.body.scrollLeft +

            document.documentElement.scrollLeft;

y = e.clientY + document.body.scrollTop +

            document.documentElement.scrollTop;

} 

 

21.   The arc() method takes a center point (x, y) , a radius, a start and end angle (in radians), and a direction flag (false for clockwise, true for counter-clockwise).