Canvas basics in 3d

 

 

 

 

 

 

 

 

 

 

Canvas arc segment 

arcTo: Draws an arc of a fixed radius between two points (or tangents). 

beginPath: Creates a new “path” of pixels on the canvas. 

bezierCurveTo: Creates a curve based on a set of Bezier coordinates. 

clearRect: Clears pixels within a given rectangle. 

clip: Hides pixels outside a given area. 

closePath: Closes the current subpath and starts a new path at the coordinates of the closed subpath.

drawImage: Draws image files to the canvas.  fill: Fills the current path with the fillStyle property

fillRect: Fills pixels of given dimensions from the fillStyle property. 

fillText: Fills the canvas with a “text” element at a given coordinate. 

lineTo: Draws a line from the current path location to the given coordinate. 

moveTo: Creates a new subpath from the given coordinates. 

quadraticCurveTo: Connects the last point in the current subpath to a given point using a quadratic Bezier curve.

rect: Creates a subpath rectangle from a given point, and a height and width. 

restore: If there is a saved drawing state, it pops the top entry off the drawing state stack; otherwise it does nothing. 

rotate: Rotates a path in a clockwise manner by an angle expressed in radians. 

save: Pushes a copy of the current drawing state onto the drawing state stack. 

scale: Scales a path by a factor along the x- and y-axes. 

setTransform: Resets the current transform to the identity matrix, then invokes a transform with the same arguments. 

stroke: Calculates the stroke of all subpaths along the current path, then fills the stroke area using the strokeStyle property. 

strokeRect: Like stroke, but for a given rectangle. 

strokeText: Fills a “text” with the value of the strokeStyle property. 

transform: Runs a transform matrix on the current path by multiplying the path by the matrix: [[a, c, e],[b, d, f], [0, 0, 1]]. 

translate: Translates a path to a new location using a transformation matrix.

These methods in the HTML5 specification for the canvas elements allow developers to do some rather amazing things. You can easily render a shape, resize it, move it across the screen, and apply different textures to it. These methods all require a fair amount of

math (linear algebra) to calculate, but instead of developing your own routines to do these tasks, browsers provide you with a consistent API for these complex operations. Of all the drawing methods, one that you will use quite often in developing games is drawImage(),which I get into more in depth in future chapters. I give some basic examples of using some of the other methods, but depending on the type of game you envision writing, you may not need to use all of these methods.