Readings: 271

We explored the depths of HTML5 Canvas and the first results are promising!

Although being around for some years, it was in 2015 that I began to see a greater proliferation of the use of HTML5 Canvas. There are more and more developers betting on this technology and they have good reasons to do so. With the use of Javascript, it is possible to draw lines, geometric shapes, text and gradients. Another important feature is that HTML5 Canvas can be animated, which makes it an essential tool for UX/UI designers seeking to create interactive web applications.

Several studies show that animations will be one of the great Web trends for 2017, so we felt like it was time to increase our know-how and dive deeper into the vast array of possibilities that HTML5 Canvas has to offer. We then began to develop some basic animations that responded to the movements of the mouse cursor, in order to provide some interactivity with the users.

Here are some of the experiments we "cooked" in our laboratory.

1. Canvas Mouse Bubbles

In this animation, we created an effect of floating bubbles that are spawned from the coordinates of the mouse cursor and that rise until they vanish. Each bubble has a lifetime of 1000 milliseconds. Based on this factor, we can calculate each bubble's opacity, from the moment it appears on the canvas until the moment it vanishes.

2. Canvas Moving Dots

This experiment turns out to be a variation of the Canvas Mouse Bubbles, but in this case, the animation starts when the page loads. The user can still interact with the animation, making the bubbles bigger while moving the mouse cursor across the canvas.

3. Canvas Triangles Background

This is by far the most complex animation we produced. Inspired by the versatility of Motion Graphics, we wanted to find out if it was possible to create elaborated animations using only web-based technologies.

The main advantage in relation to video is that HTML5 Canvas allows developers to create animations that users can interact with.
In this animation the user can interact with the triangles by changing the opacity and the border color of those in the vicinity of the mouse cursor.


Don't be a stranger

Subscribe for updates about our work.