Canvas Effects in HTML5

1. Canvas States

  • It is basically a snapshot of all the styles and transformations applied. There are two important states provided by canvas i.e. the save and restore canvas states.

    • It consists of:

    i) transformations like translate, scale and rotate etc.
    ii) current clipping region.
    iii) current values of the attributes can be : strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline.

  • Every time a save method is called the canvas state is stored on a stack.
  • Whenever the restore method is called the last saved state is returned by the stack.
a) save() : The current state is pushed on the stack by using this method.
b) restore() : The top state of the stack is poped by this method and it restores the context to that state.

2. Canvas Translations

The translate(x,y) method moves the canvas and its origin to a different point in the grid.
Where,
     x will be the amount of canvas moved to the left or right.
     y will be the amount of canvas moved up or down.

3. Rotation

  • The rotate(angle) method is used to rotate the canvas around the current origin.
  • Only one parameter can be taken up by this method and that is the angle the canvas is rotated by. It is a clockwise rotation which is measured in radians.

4. Scaling

  • The scale(x,y) method increases or decreases the units in the canvas grid. It is used for drawing scaled down , enlarged shapes and bitmaps.
    • Where,
         x is the scale factor for the horizontal direction.
         y is the scale factor for the vertical direction.
  • Both these parameters have to be positive numbers.
  • The values which are smaller then 1.0 will reduce the unit size and values which are larger than 1.0 will increase the unit size.
  • If the scale is set to 1.0, it does not affect the unit size.

5. Transforms

There are some methods that are provided for allowing modifications directly to transform the matrix.  The initial stage of the transformation matrix should be the identity transform. They are then adjusted by using the following methods:

a) transform(m11,m12,m21,m22,dx,dy)
The transformation matrix which is applied to the matrix given by the arguments is changed by using this method.

b) setTransform(m11,m12,m21,m22,dx,dy)
The transformation matrix will change it to the matrix that is given by the arguments by using this method.

6. Composition

A composite attribute globalCompositeOperation that affects all the drawing operations is provided by HTML5 canvas.

This attribute helps in drawing new shapes behind the existing ones and they mask off certain areas and clear sections from the canvas.

Following are some values that can be set for the globalCompositeOperation:

AttributeDescription
source-overIt is the default setting and draws new shapes on top of the existing canvas content.
source-outA new shape is drawn where there is no no overlapping done to the existing canvas content.
source-inA new shape is drawn where both the new shape and destination canvas overlap with each other. Rest of the things are transparent.
source-atopA new shape is drawn only where it overlaps the existing content.
xorShapes are made to be transparent where both are overlapped and are drawn normally everywhere else.
lighterBoth the shapes overlap the color and are determined by adding the color values.
destination-inIt is the existing content of the canvas which is kept where both the new shape and the content of the canvas overlap and everything else is transparent.
destination-outIt is the existing content which is kept where it does not overlap with the new shape.
destination-overThere are new shapes which are drawn behind the existing canvas content.
destination-atopThe existing canvas is kept only when it overlaps the new shape. Any new shape will be drawn behind the content of the canvas.
darkerBoth the shapes will overlap the color which is determined by subtracting the color values.

7. Animations

There are methods provided by HTML5 canvas which are used for drawing and erasing the images. With the help of JavaScript we can put up a good animation over the HTML5 canvas.

There are two JavaScript methods which can be used for animations. They are as follows:

a) setInterval(callback,time); : The code is executed repeatedly after a given time milliseconds by using this method.

b) setTimeout(callback,time); : The code is executed only once after a given time milliseconds by using this method.
▲