No sé mucho sobre nuxt.js, pero puedo tocar el lienzo de html5, cómo funciona en general y cómo funcionan las animaciones.

¿De qué se trata el lienzo en general?

1. El elemento lienzo es básicamente, como su nombre indica, un espacio en blanco... Como el lienzo de un pintor:

2. A través de javascript puede escribir y dibujar cosas en el lienzo (texto, imágenes, formas, líneas, etc.)

3. Para hacer esto, que es un aspecto importante para las animaciones interactivas que tocaremos en un momento, especifica la posición en el lienzo donde desea dibujar una cosa específica.

¿Cómo funciona el lienzo para animación?

Ahora, como se discutió, el elemento de lienzo no admite animaciones (mover cosas). Admite cosas fijas o inmóviles (imágenes, líneas, texto, etc.) dibujadas en él. PERO, ¿qué son las animaciones? Las animaciones son simplemente un grupo de imágenes que se secuencian de tal manera que la siguiente imagen muestra algo (personaje, persona, lo que sea) que cambia de posición solo un poco con respecto a la imagen anterior. Un libro animado demuestra muy bien esta idea:

Entonces, para animar en el lienzo, básicamente haces lo mismo. En realidad, necesitaría tener una cantidad de imágenes (dependiendo de la complejidad de su animación, podrían ser muchas) que representen las diferentes etapas del movimiento de su monstruo. Entonces tendría que tener algún tipo de proceso de "marca" (usando setInterval por ejemplo) donde dibujará la siguiente imagen en el lienzo. Es posible que deba limpiar el lienzo antes de dibujar la siguiente imagen. O puede tener una imagen de fondo que se mantenga constante para que en cada "marca" primero dibuje la imagen de fondo y luego dibuje la siguiente imagen del monstruo.

Interactuar con el monstruo/objeto animado

Canvas no es consciente de la posición de tu monstruo después de dibujarlo... Así que tendrías que tener tu propia variable u objeto de monstruo (javascript, por supuesto) que usas para rastrear la posición actual del objeto en el lienzo. . Luego puede usar los eventos del mouse para rastrear el mouse, de modo que cuando el mouse haga clic en una posición en el lienzo que corresponda con el lugar donde está el objeto animado (de acuerdo con los datos variables de su monstruo), puede detectar una interacción del mouse con el monstruo y haga lo que quiera hacer cuando eso suceda (tal vez active una animación específica), etc.

En pocas palabras, y simplificado en exceso, es lo que tendría que hacer si quisiera implementar sus propias animaciones basadas en html5. Pero estoy seguro de que hay algunas bibliotecas de JavaScript que puede encontrar en línea que pueden ayudar con esto. Hace tiempo que no miro las animaciones de lienzo.

¡Buena suerte!