Cloudinary Blog

Create Beautiful HTML5 Animations With the Canvas Element

Create Beautiful HTML5 Animations With the Canvas Element

You can create animations with HTML5 by combining HTML, CSS, and JavaScript (JS), with which you can build shapes. Also, you can control animations and edit images, video, and audio by means of JS or CSS elements, all of which you then add to a drawing board, which you set up with the <canvas> element.

This article shows you how to create simple animations in three examples. Also described are the HTML5 best practices for canvas optimization, including the procedures for prerendering to an off-screen canvas, batching together canvas calls, layering canvas for complex scenes, and implementing the requestAnimationFrame() method.

Here are the sections:


Delivering Compelling Video Experiences at Scale


Definition of HTML5 Animation

You create HTML5 animations with HTML’s canvas element, which acts as a drawing board for images on which are displayed multiple frames for animation. As mentioned earlier, to build HTML5 animations, you use HTML, CSS, and JS.

Additional tools are available with which you can quickly create complex animations. Examples are media management systems and HTML5-animation software, which offer the drag-and-drop capability for placement of shapes and enable interactivity. HTML5 animation tools typically generate code, which you can then modify or embed in your sites or apps.

Creation of Simple HTML5 Animations

To create animations with HTML5, you need shapes and a method for controlling the live actions. Recall that you can create shapes, which are JS elements, and control animations with CSS or through JS. You can also incorporate images, video, or audio by importing the appropriate elements.

Follow these steps:

  1. Set up a canvas by adding a <canvas> element to your HTML document, for example:

    <canvas id="myCanvas" width="300" height="200"></canvas>

  2. Locate the element in your JS and create a drawing object with this code:

    Copy to clipboard
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
  3. Draw your shapes with a method, such as one of the following:

  • fillStyle(color|pattern|gradient): for setting the fill style of your shape.
  • fillRect(x,y,w,h): for drawing a rectangle according to the specified coordinates and fill style.
  • strokeStyle(color|pattern|gradient): for specifying a stroke style for your shape.
  • strokeRect(x,y,w,h): for drawing a rectangle with borders that match the specified sizes, coordinates, and style.

For all the drawing options, see the W3Schools’ HTML Canvas Reference.

While drawing shapes, you can save your canvas state to create frames for rendering according to the parameters you set with the following JS methods:

  • window.setInterval()
  • window.setTimeout()
  • window.requestAnimationFrame()

HTML5 Animations with Code Examples

Below are three beautiful examples of HTML5 animations that showcase their types. To see the HTML, CSS, and JS code within each frame, click the buttons across the top left.

  1. Lightning, created by Jack Rugile

    See the Pen Canvas Lightning WIP by Jack Rugile (@jackrugile) on CodePen.

  2. Tearable Mesh, created by dissimulate

    See the Pen Tearable Cloth by dissimulate (@dissimulate) on CodePen.

  3. Earth and Sun, created by MDN

    See the Pen An animated solar system by Prosper Otemuyiwa (@unicodeveloper) on CodePen.

HTML5 Best Practices for Canvas Optimization

For a smooth performance of animations, adopt the best practices below.

Prerender to an Off-Screen Canvas

A majority of the scenes in many animations, such as games, contain repeated images or similar ones. Rather than reloading those images in your primary canvas each time, prerender the scenes in an off-screen canvas, after which you can move that canvas back in line with your primary one.

Such a practice not only boosts the performance of your animations, but also smooths out their appearance.

Batch Together Canvas Calls

Drawing elements while scripting animations takes resources and time. For efficiency, consider loading multiple, shorter commands at once to the video buffer, which then processes each of the operations.

For example:

Copy to clipboard
context.beginPath();
for (let i = 0; i < points.length - 1; i++) {
  let p1 = points[i];
  let p2 = points[i+1];
  context.moveTo(p1.x, p1.y);
  context.lineTo(p2.x, p2.y);
}
context.stroke(); **//Placing this method inside the for loop would result in poorer performance.**

Layer Canvases for Complex Scenes

Layering canvases separates the rendering of larger elements. Do so by applying transparency to your top-layer canvas elements and a background canvas to those elements that you want to render. Assuming that your canvases are aligned, viewers will see a composite image of all the canvases on a rendering of your scene.

With layered canvases, you can keep the static elements of your animation as background and create the moving elements in the other layers, saving you the trouble of having to refresh or rerender a majority of your scene.

Implementation of requestAnimationFrame()

The requestAnimationFrame method enables you to rely on your viewer’s browser to apply your set-rendering routine at the right time. That means that no rendering occurs if your page is not being viewed—as opposed to having the browser render scenes at a fixed rate regardless of whether the viewer is on your page.

Having the browser determine when to render animations eliminates waste of processing power when they are out of view. However, when applying requestAnimationFrame(), be sure to verify that the browser is rendering the animation smoothly. As a rule, with requestAnimationFrame() in place, browsers render animations at 60 FPS, but that’s not guaranteed.

The following code adds a check for smoothness:

Copy to clipboard
let x = 50;
let y = 50;
let lastRender = Date.now();
function render() {
  let delta = Date.now() - lastRender;
  x += delta;
  y += delta;
  context.fillRect(x, y, W, H);
  requestAnimationFrame(render);
}
render();

Generation of GIF-Based Animations With Cloudinary

Generating animated GIFs on Cloudinary is a simple, intuitive process:

  1. Create your images with Cloudinary overlays and chained transformations.
  2. Properly position the images that are in or outside the canvas with custom overlay coordinates.
  3. Add a simple script that programmatically generates transformation URLs and pass them to Cloudinary’s upload API call as the criteria for generating new images.

In Cloudinary, you can create a “sprite”—a single, cloud-based GIF—by merging together images that share the same tag. For a step-by-step tutorial, see our post Create Cloud-Based Animation Sequence GIFs.

Display of Video Content With Cloudinary

Beyond animations, most websites need a convenient way to process and display video. Cloudinary is the answer: it’s a cloud-based platform on which you can dynamically transcode and manipulate videos, optimizing file formats and sizes to any device, browser, or media channel. Additionally, you can easily perform these tasks on that platform:

  • Embed videos in webpages and apps with Cloudinary’s dynamic URLs.
  • Integrate your videos with URL-based APIs and SDKs.
  • Deliver smooth video-streaming through multiple CDNs and live-stream from any device, including sharing on social media.

Why not sign up for a free Cloudinary account to try things out? We offer a generous free plan to get you started.

Want to learn more about image editing?

Have a look at these articles:

Recent Blog Posts

Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more
How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

Read more
Product Videos 101: What Makes Them Great?

A product’s benefits and usage, including its value proposition, features, and instructive details, are best demonstrated through video. Product-video types vary, depending on the funnel, channel, and audience, the most popular ones being demos, reviews, installation, and how-tos.

Read more