Working with Canvas – The new technology of vector animation

Use of HTML5 gives developers new horizons in animation implement for their websites. There is no need to use outdated Flash technology or to overload traffic with large images, you can simply familiarize with a few norms of creation of motion interpretation by canvas redraw.

Canvas is a page area reserved for drawing vector elements; there are local coordinates in this area. The following line should be written by using JS to draw, for example, a circle:

arc(ox, oy, radius, startAngle, endAngle, antiClockWise)

where ox and oy — center coordinates, radius — circle radius, startAngle and endAngle — start and end angles (in radians) to draw the circle, and antiClockWise is the direction of motion during drawing (true for clockwise motion, false is for counterclockwise).

The given technology allows creation of all basic forms and elements, thus providing the opportunity to ideally create a picture on the reserved area at your website. This method does not effect the page loading time as the drawing of elements takes place instantly, without loading images as had previously been the case.

Now about animation. Everybody is aware about how old cartoons were created, when each frame was drawn manually and the illusion of motion was created by frame rate at which they were then show.

This approach lies behind the animation creation in canvas. Redrawing of all elements takes place automatically every 0.2 seconds, and this creates realistic motion. 

There is a mass of originally drawn balls placed on their coordinates. The drawFrame() function activates when a point action occurs. The drawFrame() function is a key part of this example. It not only draws the balls on the canvas but also calculates their current position and speed. A number of different calculations are calculated in the drawFrame() function to more realistically emulate the balls motion. For example, a ball‘s acceleration while falling and deceleration when they bounce from interference. The function activates every 0.2 seconds, evaluates ball position and speed at a time. The standard JavaScript method is used to implement this:

setTimeout("drawFrame()", 20)

As a result the balls move according to programmed laws of motion.

HTML5 Canvas technology is used to create modern browser games, moving elements interaction with users and also just to make a webpage more appealing to a client.