HTML Canvas Crash Course for Beginners

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

4.83 (299 reviews)
Udemy
platform
English
language
Web Development
category
instructor
7,537
students
1 hour
content
May 2021
last update
FREE
regular price

What you will learn

Animation with JavaScript, HTML Canvas, HTML and CSS

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 :)

Content

HTML canvas from basics to advanced

Final project preview, HTML and CSS setup
Basic JavaScript setup
How to use resize event listener to prevent stretching
Drawing a circle with arc method
Mouse interactivity with click event
Paint brush effect with mousemove event
Animation loop
How to create a particle system with JavaScript classes
Particle trail effect
Interactive colors with HSL color declaration
Constellations effect explained
Well Done!

Screenshots

HTML Canvas Crash Course for Beginners - Screenshot_01HTML Canvas Crash Course for Beginners - Screenshot_02HTML Canvas Crash Course for Beginners - Screenshot_03HTML Canvas Crash Course for Beginners - Screenshot_04

Reviews

Amélie
August 2, 2023
Frank is a great teacher, this crash course was really interesting and well explained. Thank you very much!
Kath
June 23, 2023
I thought I might have too little experience with JS (I'm beginner level but have done a bit) but am following it and it's really helping me to understand more about JS in general as well as Canvas.
Sherry
February 25, 2023
Amazing Course as always! Frank Dvorak is top notch and his courses never cease to amaze me. I probably understood about half of it in the beginning as I started taking Frank's courses as a beginner in JavaScript but trust me, the more you code and take Frank's courses, the more you'll understand, even when it comes to other JavaScript projects.
Sébastien
February 17, 2023
Very intuitive course with practice all along. This is a fun way to learn and it is challenging, This is my second course with the Jedi Frank Dvorak I am a big fan. Thank you Master Frank D. Pour les francophones ce cours est une excellente façon de s'exercer et d'apprendre en s'amusant. Merci Frank D.
Ricardo
January 17, 2023
I love your content, you go straight to the point and explain in a way that either beginners or advanced programmers can understand without getting bored, videos are only 3 minutes each and the two "long" videos are easy to follow along too. 5 stars.
Alejandro
January 13, 2023
I'm actually amazed. I wish I had learnt javascript this way. 100% recommended if you have some javascript knowledge (not a lot, up to prototypes). Now I want more. I would like to see how could I integrate these kind on effects on a regular web application.
Ama
December 16, 2022
It is an excellent tutorial for beginners but not for absolute beginners. Fascinating topic and clear to follow instructions. I enjoyed every step.
Jay
December 6, 2022
I love Frank's YT videos too! Frank not only knows what he's doing, but he's also VERY good at explaining it to complete idiots like myself. I would trust anything this guy puts out!
Paul
October 2, 2022
I really enjoyed this course. I especially enjoyed the use of the ES6 class syntax, to create the use of OOP. The instructor presentation was excellent with very short instruction to understand and grasp the concept of drawing within the canvas element.
Marty
September 10, 2022
I liked the part were he got the class interested in fixing problems with the thin lines on different scales of array and then fixing the problem by just deleting it or figuring it out.
Dikshit
June 1, 2022
Amazing!!! The course is designed in a very interesting and interactive way enabling learners to grasp the concepts easily.
Said
March 15, 2022
thank you so much for this amazing course, I learn so many new things. *I wish it was a little bit more beginners friendly.
Chris
February 13, 2022
Great introductory tutorial on html5 canvas - Frank has a great series on this stuff, I'm a fan of implementing all code in plain vanilla JS. Nice!
Terry
September 21, 2021
Nice course, Frank really explains things well. His programming skills are top notch! Those interested in learning should appreciate this free course.
Thomas
August 21, 2021
Frank has a great teaching style and a friendly demeanor. I enjoy learning from his videos and recommend them to anyone else interested in this topic.

Charts

Price

HTML Canvas Crash Course for Beginners - Price chart

Rating

HTML Canvas Crash Course for Beginners - Ratings chart

Enrollment distribution

HTML Canvas Crash Course for Beginners - Distribution chart
4011344
udemy ID
4/27/2021
course created date
5/3/2021
course indexed date
Bot
course submited by