I work with nuxt 2. I really like the monster animation on the main screen of massivemonster.co . You can even interact with it just by clicking on it with your mouse. Can you please tell me how to create a canvas animation like this? Monster image
I do not know much about nuxt.js but can touch on html5's canvas, how it works generally and how animations work.
What is canvas about generally?
The canvas element is basically, as the name suggests, a blank space... Like a painter's canvas:

Through javascript you can write and draw things on the canvas (text, images, shapes, lines etc)
To do this, which is an important aspect for interactive animations which we will touch in a bit, you specify the position on the canvas where you want to draw a specific thing.
How does canvas for animation work?
Now as discussed the canvas element out the box does not support animations (moving things). It supports still or motionless things (images, lines, text, etc) drawn on it. BUT what are animations? Animations are simply a group of images that are sequenced in such a way that the next image displays something (character, person, whatever) changing position just a little bit from the previous image. A flip book demonstrates this idea very well:

So to animate on the canvas you basically do the same thing. You would need to actually have a number of images (depending on the complexity of your animation it could be many) that represent the different stages of your monster moving. You'd then have to have some form of "tick" process (using setInterval for example) where you will draw the next image on the canvas. You may need to clear the canvas before drawing the next image. Or you may have a background image that stays constant so that on each "tick" you first draw the background image and then draw the next monster image.
Interacting with the monster/animated object
Canvas is not aware of the position of your monster after it draws it... So you'd have to actually have your own variable or monster object (javascript of course) that you use to track the current position of the object on the canvas. You can then use the mouse events to track the mouse so that when the mouse clicks on a position on the canvas that corresponds with where the animated object is (according to your monster variable data) you can then detect a mouse interaction with the monster and do whatever you want to do when that happens (maybe trigger a specific animation) etc
That in a nutshell, and over simplified, is what you'd have to do if you wanted to implement your own html5 based animations. But I'm sure there are some javascript libraries that you can find online that can assist with this. Have not looked into canvas animations in while.
Good luck!