https://skilled.co/resources/html-canvas-cheat-sheet/

The main use of HTML Canvas

Canvas can be used for a whole range of purposes, but the most common seem to be for creating games and apps, as it is easy to create graphics and animations. Games in particular are a popular use of canvas, and over hundreds of games a week are created using this element of HTML5. Canvas is being used more regularly, but at the moment it seems mainly for games and gamification.

Canvas can render 2D and 3D animation up to 60 frames per second. As technology develops, Adobe Flash is fading away. Therefore, it is exciting to have an alternative that not only seems better than flash, but also is mobile friendly.

Can canvas make a comeback in the web world?

Perhaps it is time that HTML canvas made a comeback into the world of web development as this seems to have almost taken a back seat. The function is easy to use. So much so that almost anyone could learn how to use it to build web pages with only a  little learning, plus all that is needed is a web browser that supports it. Therefore, it has the potential to re-imagine how both professionals and individuals develop the web.

How could it be used on the web?

It is completely up to the developer how much a canvas element is used on a webpage. It could have a major part in the design process, with most of the site created using canvas, or it could be used sparingly throughout the site for just a few buttons or dynamic images.

One of the biggest draws of using the canvas element in web design is that it can run well on mobile devices, giving ease of use for online visitors. More and more people are now turning to their phones rather than a computer to access webpages, so it makes sense for websites to be tailored to mobile use.

Benefits of using canvas

• Button hover states- Buttons are no longer restricted by CSS, they can be made to rotate, animate and morph to create an exciting web page. This interactivity in a web page can excite the user, and is only restricted by the developer’s imagination, put will provide mobile friendly buttons and menu bars.
• Dynamic Images- Using JavaScript in the canvas, developers can edit, layer and manipulate images, plus they can be tweaked and cropped causing no problems to the site.
• Better than Flash- Canvas is better than Flash for a whole range of reasons, it performs better with animation, video and many other features. This will create a more modern and modular experience for the user, easy to both update and edit.