HTML Canvas Crash Course for Beginners

Name: HTML Canvas Crash Course for Beginners
Rating: 4.8 (415 reviews)

How to use HTML, CSS and vanilla JavaScript to create beautiful interactive animations for your website.

Created byFrank Dvorak

Last updated 5/2021

English

What you'll learn

Animation with JavaScript, HTML Canvas, HTML and CSS

Course content

1 section • 12 lectures • 51m total length

Final project preview, HTML and CSS setup2:50
Today we will build animated interactive particle system, let's start by setting up our files.
Basic JavaScript setup4:38
We will use vanilla JavaScript today, no frameworks and no libraries, let me show you how to do very simple JavaScript setup.
How to use resize event listener to prevent stretching1:18
Stretching issue is a common problem for full screen canvas effects. Luckily there is a simple solution.
Drawing a circle with arc method3:23
How to use built in arc method to draw a circle.
Mouse interactivity with click event4:00
Draw shapes on mouse click.
Paint brush effect with mousemove event1:50
Draw shapes on mouse move to create paintbrush effect.
Animation loop2:22
How to create animation loop with vanilla JavaScript.
How to create a particle system with JavaScript classes11:12
How to use JavaScript classes to create particle systems.
Particle trail effect7:12
Make particles react to user input.
Interactive colors with HSL color declaration4:08
HSL colors explained.
Constellations effect explained8:36
Most people use libraries to create constellations effect. If we write the code ourselves with plain vanilla JavaScript, we can better understand what's going on under the hood and we will also have complete control over the animation.
Well Done!0:26
Well done, we went really far in 45 minutes. Hope you had fun and learned something new today. Good luck with your coding studies! :)

Requirements

Basic knowledge of HTML, CSS and JavaScript

Description

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