Advice on HTML Interactivity and... "Bulky" Code?

Hi, everyone! This question is very much "I'm a web dev novice and don't know what best practices are", so please bear with me!

I'm semi-familiar with Animate and it's functions, but have run into a road block when it comes to using the HTML5 Canvas in a larger HTML project (what is essentially personal/educational front-end development). I can impliment the interactive bits just fine (I tend to cut out the Canvas code and paste into the desired page), but the resulting code is super cumbersome; perhaps there's a minimalist/optimalist in my brain that looks at the mess I made and thinks "surely there's a better way."

There is a lot going on under the hood to make these animations work (and my Javascript knowledge is meager at best), but how do you manage both implimenting Animate online... while keeping the pages relatively legible and clean? Is there a best practice when it comes to this kind of thing, or is bulky code the unfortunate norm? 

Thank you for reading!