HTML Canvas Crash Course for Beginners

How to use HTML, CSS and vanilla JavaScript to create beautiful interactive animations for your website.
Free tutorial
Rating: 4.9 out of 5 (197 ratings)
5,152 students
52min of on-demand video
English [Auto]

Animation with JavaScript, HTML Canvas, HTML and CSS


  • Basic knowledge of HTML, CSS and JavaScript


From HTML5 canvas basics to beautiful particle systems in one video. Do you want to master Front End Web Development this year? Then this tutorial is for you! :) We will go from important fundamentals to digital art, let me show you the real power of vanilla JavaScript in this HTML5 canvas crash course for beginners!

Today we will learn HTML5 canvas by creating a drawing app, interactive particle system, mouse trail and beautiful constellations effect that was made popular by Particles.js library, but we will use no libraries. We will code everything completely from scratch, to get fundamental understanding of vanilla JavaScript and HTML canvas element. I will write the code with you step by step, and I hope you get some value today and get yourself one step closer to achieving your self development goals!

I made this HTML5 canvas tutorial for beginners to clarify common coding techniques and hopefully inspire you to keep learning JavaScript. Learning canvas can be easy, if you're having fun. When you understand it's principles, all your creative coding, generative art and game development ideas will come to life!

I make web animation courses, from basics to advanced. Let's build beautiful things together while learning JavaScript! This tutorial is aimed at JavaScript beginners, but some basic knowledge of HTML, CSS and JS is expected. I'm new to teaching, please let me know your feedback, anything you can tell me helps me to improve :)

Who this course is for:

  • Beginner front end web developers interested in creative coding and visual projects


Front End Web Developer & Instructor at Frank's Laboratory
Frank Dvorak
  • 4.8 Instructor Rating
  • 462 Reviews
  • 17,513 Students
  • 6 Courses

Hi, I'm Frank! I'm a front end web developer, owner of Frank's laboratory YouTube channel, that specializes in creative coding with vanilla JavaScript and HTML canvas. Let's make some art, games and visual projects and learn about HTML, CSS, JavaScript and front-end web development!

In my courses I use only plain vanilla JavaScript, no frameworks and no libraries. When you have deep understanding of JavaScript the programming language, picking up any library is easy.

Top companies trust Udemy

Get your team access to Udemy's top 19,000+ courses