Using JavaScript for Animations: The HTML5 Canvas and SVG

Animation today is arguably one of the key components for any contemporary website as it enhances the interactive element of the site. Thanks to the introduction of HTML5 together with JavaScript, animators now have animation creation tools that are easier to use and perform. Two of the most common ways of performing animations in JavaScript are the HTML5 Canvas and Scalable Vector Graphics (SVG). On one hand, using both technologies allows users to work with images on a web page, but on the other hand, it enables them to do it in quite an opposite manner. For those who want to be successful in web designing, it is necessary to know how to use these two tools in animation.

Definition of HTML5 Canvas

The HTML5 canvas element is a graphics canvas that is dynamically generated on a webpage via scripting language, such as JavaScript. This means Dynamic images, drawings, and graphics can be created and manipulated within a web page. This would be achieved without the use of content that is embedded in the canvas. The canvas element provides a space for JavaScript to make images but does not itself contain any images.

The canvas method by itself provides quite a broad range of methods for managing the pixels inside the canvas boundary which includes drawing of images of lines, shapes and images, styles, and also transformations. Since the Canvas is pixel based it means it works with pixels individually and renders images on to the screen.

To do this, the canvas has to be declared in HTML and its width and height attributes set. Then it can be accessed through JavaScript, in order to enable it, certain codes have to be driven into the context for the purpose of content modification associated with the inside of the canvas.

Declaring Canvas in HTML


Accessing Canvas in JavaScript

  const canvas = document.getElementById("myCanvas");
 
const ctx = canvas.getContext("2d");


Animating with the Canvas

Drawing new images of frames and putting them in succession one after another makes animation in the canvas appear which in turn displays the frames that have been drawn previously which is enabled through properly timed drawing using the `requestAnimationFrame` method.

Basic Canvas Animation Example

  let x = 50;  // Circle's first pixel in the x axis
 
let y = 50;  // Circle's first pixel in the y axis
 
function animate() {
 
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // Let's erase the last circle
 
    ctx.beginPath();
 
    ctx.arc(x, y, 20, 0, Math.PI * 2);  // Place a circle in the center
 
    ctx.fillStyle = "red";
 
    ctx.fill();
 
    x += 1;  // Increment x position by 1 Pixel.
 
    y += 1;  // Increment y position by 1 Pixel.
 
    requestAnimationFrame(animate);  // Move on to the next frame and repeat.
 
}
 
animate();  // Drawing and looping the animation.


As observed in this example, the method `clearRect` clears every frame that comes after it and the circle is to be drawn again at different coordinates in every frame. Adjusting the parameters for the `x` and `y` coordinates while redrawing the circle over and over makes it look like it is animated smoothly.

What is SVG?

SVG or Scalable Vector Graphics is one of the concepts used in creating graphics in web development. It is different from Canvas which uses pixels to create images since SVG is a vector. Hence, images made using svg can appear in any size as images are composed of paths. It is also important to note that SVG graphics are created in an XML format hence the lightweight nature and they are also easily modifiable via text.

Most of the time SVG is used in designing logos and icons and even other graphics since it is resolution independent meaning an image of any size can never appear blurry. Moreover, since CSS and Javascript can be used to style and animate SVG elements, they can also be effectively used in web interactive animations.


Animating with SVG

Even though SVG is primarily a static vector format, javascript can be used to animate SVG elements. This renders it easy to animate elements on SVG as opposed to canvases where the entire scene would have to be erased and redrawn.

SVG Animation Example


As noted in this example, the SVG rectangle is animated using the `setAttribute` method whereby the `x` and `y` position values of the rectangle are changed, moving it from one to several specific points or corners.

Apart from animating shapes using Javascript, CSS can also be used in animating SVG elements. For instance, one can animate a shape's fill, its opacity or location through the application of `transition` and `animation` effect of the CSS elements. This is however much better when Java is included because one can create unique and intricate animations effortlessly.

Canvas and SVG – What's the Difference?

Both can create animations but canvas and SVG seem different. Canvas is rather meant for creating animations or games where loads of interconnected pixels would be involved. Canvas makes creating pixel-based graphics easy. In contrast, many suggest SVG for any logo, icon or similar situational vector graphics that you can easily scale up or down.

Canvas is more suited when a number of graphics at the scene need to be drawn and the scene has lots of changes. But for animating single objects, it has disadvantages since every scene needs to be drafted again and again with each moving frame. Since SVG graphics are vector based, they will work for animations which are limited in the number of moving objects and will maintain their sharpness in all resolutions.

Both have their pros and cons and the decision to go with either of the two mainly focuses on the graphics detail and the animation that you require.