HTML Canvas is used to draw graphics and animations directly on a web page using JavaScript. Canvas is the most talked about HTML5 feature that allows web developers, designers and game developers to create amazing graphics, animations and illustrations using only HTML5 and JavaScript.
HTML 5 Canvas
About the Author: Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
Watch Online 40 lessons
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction to the course Demo | 02:58 | |
| 2 | Introduction to what HTML5 canvas is and how it can be used | 05:45 | |
| 3 | HTML5 Course Resources | 04:28 | |
| 4 | HTML5 prepare basic setup HTML | 03:37 | |
| 5 | Pixel locations in HTML5 canvas | 03:43 | |
| 6 | How to create a canvas in HTML5 | 04:13 | |
| 7 | HTML5 connect canvas to JavaScript | 04:23 | |
| 8 | HTML5 drawing on your canvas JavaScript | 05:35 | |
| 9 | HTML5 rectangles | 02:38 | |
| 10 | shadows in canvas | 04:07 | |
| 11 | Drawing line on Canvas HTML5 | 08:20 | |
| 12 | Draw Full Circle | 05:11 | |
| 13 | Drawing Curves with HTML5 How to use Bezier Curve | 07:29 | |
| 14 | Curves Loops and useful tips for HTML5 canvas drawing | 07:52 | |
| 15 | HTML5 canvas updates | 03:01 | |
| 16 | Solution to Challenge 1 | 04:12 | |
| 17 | Introduction to Colors HTML5 Canvas | 02:48 | |
| 18 | RGB RGBA colors working with alphas and loops | 08:27 | |
| 19 | All about lines in HTML5 Canvas | 06:20 | |
| 20 | Dashes in lines | 03:54 | |
| 21 | How to work with createLinearGradient | 08:51 | |
| 22 | How to use createRadialGradient in HTML5 canvas | 05:57 | |
| 23 | How to add text to html5 canvas | 06:55 | |
| 24 | Difference between SVG and Canvas images | 02:26 | |
| 25 | Use HTML5 Canvas to create images on the fly | 05:58 | |
| 26 | HTML5 canvas using onpage images into canvas | 05:49 | |
| 27 | Image Scaling with HTML5 canvas | 03:45 | |
| 28 | Image slicing with HTML5 canvas | 07:51 | |
| 29 | Challenge 2 add frame to image | 02:07 | |
| 30 | Solution to Challenge 2 | 04:43 | |
| 31 | HTML5 canvas more complex drawing | 06:41 | |
| 32 | Using save and restore | 03:03 | |
| 33 | HTML5 moving all the content | 02:22 | |
| 34 | HTML5 how to resize your canvas | 06:09 | |
| 35 | HTML5 rotations | 08:17 | |
| 36 | HTML5 canvas custom transformations | 04:58 | |
| 37 | introduction to animation | 03:37 | |
| 38 | Add object for animation | 04:47 | |
| 39 | Creating canvas drawings | 01:49 | |
| 40 | How to clear HTML5 canvas | 04:22 |
Get instant access to all 39 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 2y ago100 Days Of Code: The Complete Web Development Bootcamp 2024
By: Academind Pro (Maximilian Schwarzmüller)100 Days of Code: Complete Web Development Bootcamp 2024 by Colt Steele — updated curriculum with React, modern JS, REST APIs, and deployment.78h 51m -
Updated 6mo agoBuild a Podcast Player with JavaScript, CSS and Node.js
By: Zero To MasteryLearn to create a full-stack podcast player using JavaScript, CSS, and Node.js. Develop skills in web development and add a project to your portfolio.8h 30m -
FreeClassicThe Ultimate HTML5 & CSS3 Series: Part 1
By: Mosh Hamedani (Code with Mosh)Learn web development with a comprehensive course on HTML5 and CSS3. Build professional websites and master responsive design, animations, and more.2h 51m5/5