DONT ADD ANYTHING HERE!

  1. Canvas is a 2D drawing API
  2. Essentially the browser gives you a rectanglar area on the screen that you can draw into
  3. Canvas was originally created by Apple for its Dashboard widgets, but it has since been adopted by every major browser vendor and is now part of the HTML 5 spec
  4. Default canvas dimensions are (x, y) = (300, 150)
  5. The upper-left corner of the canvas has the coordinates (x, y) = (0, 0)
  6. SVG vs Canvas
    1. SVG is a vector API that draws shapes. Each shape has an object that you can attach event handlers to.
    2. If you zoom in the shape stays smooth, whereas Canvas would become pixelated

Useful Commands

  1. strokeRect
    The strokeRect(x, y, width, height) method draws the outline of a rectangle
  2. fillRect
    The fillRect(x, y, width, height) method draws a filled rectangle
  3. ctx.fillStyle = 'value';
    1. Holds the style value for filled objects
    2. Possible values are CSS colors, a gradient or a pattern
    3. The default value is black
  4. ctx.strokeStyle = "red"
    1. Holds the style value for stroke objects
    2. May be a CSS color, a gradient or a pattern
    3. The default style value is black
  5. clearRect
    ctx.clearRect(x, y, width, height) clears the rectangle area defined by left upper corner (x, y)
  6. getContext('2d')
    Returns the context, i.e. an object that exposes an API for drawing on the canvas
  7. arc(x, y, radius, startAngle, endAngle, anticlockwise)
    1. Defines a piece of a circle
    2. The center of this circle is (x,y)
    3. The radius is r
    4. The start and end point of the arc are given as angles in radians
    5. The optional boolean anticlockwise parameter defines if the arcs are measured counterclockwise (true) or clockwise (value false; the default)
    6. A call of arc() is part of a path declaration, the actual drawing is done with a call of stroke(), drawing a piece of the circle line, or fill(), which draws a section of the circle disk
  8. linewidth="value"
  9. stroke()
    1. Draws the outline of the shape defined by the current path
    2. The style settings for the actual drawing are the ones that are stored in strokeStyle, and the current properties for lines and shadows
  10. fill()
    1. Draws the full area of the shape defined by the current path
    2. The style settings for the actual drawing are the ones that are stored in fillStyle and the current properties for shadows
  11. beginPath()
    1. Begins a new or resets the current path
    2. A new path is then built with
      1. moveTo()
      2. lineTo()
      3. rect()
      4. quadraticCurveTo()
      5. bezierCurveTo()
      6. arc()
      7. arcTo()
    3. The actual drawing of the path is done with stroke() or fill()
    4. A call of closePath() does close the new path, but in the sense that the current point is connected to the intial starting point
    5. It does not cause the path to be drawn
  12. closePath()
    1. In an open path, this method call "closes" the path in the sense that it connects the current point to the starting point of the path
    2. Note that closePath() does not "finish" the path in the sense that it draws it
    3. To do that, you still need to call the stroke() or fill() method
  13. moveTo(x, y)
    1. Moves the path to the new point (x,y)
    2. Different to lineTo(x,y), the moveTo(x,y) call does not create a line to the new point
  14. lineTo(x, y)
    Adds a line to the path from the current point to the new point (x,y)
  15. strokeText(text, x, y, maxWidth)
    1. Draw the given text string at the (x,y) position in stroke characters on the canvas
    2. If the optional (floating point number) maxWidth is set, the text is scaled accordingly
    3. By default, x is the start point of the text string (see textAlign) and y is the alphabetic baseline
  16. fillText (text, x, y, maxWidth)
    1. Draw the given text string at the (x, y) position in filled characters on the canvas
    2. If the optional (floating point number) maxWidth is set, the text is scaled accordingly
    3. By default, x is the start point of the text string and y is the alphabetic baseline

Safari Notes on Canvas

  1. To draw a rectangle, specify the x and y coordinates and the height and width of the rectangle
  2. The strokeRect(x, y, width, height) method draws the outline of a rectangle
  3. The fillRect(x, y, width, height) method draws a filled rectangle
  4. You draw shapes other than rectangles by creating a path, adding line segments, curves, or arcs, and closing the path
  5. Begin a path using beginPath(). Set the starting point, or start a discontinuous subpath, by calling the moveTo(x, y) method
  6. The closePath() method draws a line from the current endpoint to the starting point of the path, creating a closed shape
  7. The path is not actually drawn until you call stroke() or fill()
  8. The stroke or fill style specifies the color the element is drawn in
  9. Colors are specified using the same naming conventions as CSS — ctx.strokeStyle = "black", for example, or ctx.fillStyle = "rgba(128, 128, 128, 0.5)"
  10. You can also set the line width for strokes. For example, ctx.lineWidth = 2
  11. You can add a shadow to any shape, or make any shape into a mask by designating it as the clipping region for drawing operations
  12. Canvas supports matrix transforms—anything you draw can be translated, rotated, scaled, and more

References

W3C: canvas element
MDN: Canvas API
HTML Canvas Deep Dive (book format)
Canvas Handbook
Safari HTML Canvas Guide