Canvas - List of commands that a beginner needs to know

Referenece: https://developer.mozilla.org/en/Canvas_tutorial

Applying Styles for canvas

 <style type="text/css">
       canvas { border: 1px solid black; }
 </style>

Commands

var ctx =canvas.getContext("2d");
 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);
 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

Rectangles

fillRect(x,y,width,height) : Draws a filled rectangle
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent

rect(x, y, width, height)

Besides the three methods we saw above which draw rectangular shapes directly to the canvas, we also have a method rect which adds a rectangular path to the path list.

This method takes four arguments. The x and y  parameters define the coordinate of the top left corner of the new rectangular path. width and height define the width and the height of the rectangle.

When this method is executed, the moveTo method is automatically called with the parameters (0,0) (i.e. it resets the starting point to its default location).

Drawing paths

beginPath()
closePath()
stroke()
fill()

One very useful function, which doesn't actually draw anything, but is part of the path list described above, is the moveTo function. You can probably best think of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the next.

moveTo(x, y)

For drawing straight lines we use the lineTo method.

lineTo(x, y)

For drawing arcs or circles we use the arc method. The specification also describes the arcTo method, which is supported by Safari and Firefox, but wasn't implemented in the older Gecko browsers.
arc(x, y, radius, startAngle, endAngle, anticlockwise)

Bezier and quadratic curves

The next type of paths available are Bézier curves, available in the cubic and quadratic varieties. These are generally used to draw complex organic shapes.

quadraticCurveTo(cp1x, cp1y, x, y) // BROKEN in Firefox 1.5 (see work around below)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

A quadratic Bézier curve has a start and an end point (blue dots) and just one control point (red dot) while a cubic Bézier curve uses two control points.

USING IMAGES

drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

controlling Image Scaling Behavior : mozImageSmoothingEnabled

Colors

fillStyle = color
strokeStyle = color

Transparency

globalAlpha = transparency value

Line styles

lineWidth = value
lineCap = type
lineJoin = type
miterLimit = value

Gradients

createLinearGradient(x1,y1,x2,y2)
createRadialGradient(x1,y1,r1,x2,y2,r2)
addColorStop(position, color)

Patterns

createPattern(image,type)

Shadows

shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color

Saving and restoring state

save()
restore()

Translating

translate(x, y)

Rotating

rotate(angle)

Scaling

scale(x, y)

Transforms

transform(m11, m12, m21, m22, dx, dy)
setTransform(m11, m12, m21, m22, dx, dy)

Compositing

globalCompositeOperation = type

type is a string representing any one of twelve compositing operations. Each of the available types is described below.

Note: In all of the examples below the blue square is drawn first and referred to as 'existing canvas content'. The red circle is drawn second and referred to as 'new shape'.

source-over (default)
This is the default setting and draws new shapes on top of the existing canvas content.
  

Image:Canvas_composite_srcovr.png
  

destination-over
New shapes are drawn behind the existing canvas content.
  

Image:Canvas_composite_destovr.png

source-in
The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent
  

Image:Canvas_composite_srcin.png
  

destination-in
The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent.
  

Image:Canvas_composite_destin.png

source-out
The new shape is drawn where it doesn't overlap the existing canvas content.
  

Image:Canvas_composite_srcout.png
  

destination-out
The existing content is kept where it doesn't overlap the new shape.
  

Image:Canvas_composite_destout.png

source-atop
The new shape is only drawn where it overlaps the existing canvas content.
  

Image:Canvas_composite_srcatop.png
  

destination-atop
The existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.
  

Image:Canvas_composite_destatop.png

lighter
Where both shapes overlap the color is determined by adding color values.
  

Image:Canvas_composite_lighten.png
  

darker
Where both shapes overlap the color is determined by subtracting color values.
  

Image:Canvas_composite_darken.png

xor
Shapes are made transparent where both overlap and drawn normal everywhere else.
  

Image:Canvas_composite_xor.png
  

copy
Only draws the new shape and removes everything else.
  

Image:Canvas_composite_copy.png

Note: Currently the copy and darker settings don't do anything in the Gecko 1.8 based browsers (Firefox 1.5 betas, etc).

Clipping paths

clip()