CF

HTML 5 Canvas

3h 19m 28s
English
Paid

HTML 5 Canvas is a 40-lesson 3 hours 19 minutes self-paced course by Udemy. HTML Canvas is used to draw graphics and animations directly on a web page using JavaScript.

Course facts

Lessons
40
Duration
3 hours 19 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

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.

Who teaches HTML 5 Canvas? Udemy

Udemy thumbnail

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.

What lessons are included in HTML 5 Canvas?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 40 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction to the course
All Course Lessons (40)
#Lesson TitleDurationAccess
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
Unlock unlimited learning

Get instant access to all 39 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to HTML 5 Canvas?

More courses by Udemy

Frequently asked questions

What prerequisites are needed before taking this HTML5 Canvas course?
Before enrolling in this HTML5 Canvas course, students should have a basic understanding of HTML and JavaScript. Familiarity with how to set up an HTML page and integrate JavaScript is crucial, as the course will focus on drawing graphics and animations using these technologies.
What projects or graphics will I be able to create by the end of the course?
By the end of the course, you will be able to create a variety of graphics and animations. This includes drawing basic shapes like rectangles and circles, creating complex drawings with curves and loops, and working with images through scaling and slicing. You will also learn how to animate objects and manage canvas updates.
Who is the target audience for this HTML5 Canvas course?
This course is ideal for web developers, designers, and game developers interested in creating graphics and animations using HTML5 and JavaScript. It's designed for those looking to enhance their skill set in web graphics without relying on external libraries.
How does the depth of this course compare to other HTML5 graphics courses?
This course offers detailed coverage of HTML5 Canvas, focusing on practical applications such as drawing, image manipulation, and animations. Unlike some courses that may only introduce basic concepts, this course includes advanced topics like Bezier curves, gradients, and custom transformations, making it suitable for learners wanting a thorough understanding.
What tools or platforms will I learn to use in this course?
The course primarily focuses on using HTML5 Canvas and JavaScript for creating graphics. You will learn how to set up a canvas, connect it to JavaScript, and use various drawing techniques. Additionally, the course covers creating linear and radial gradients, adding text, and using on-page images with the canvas.
What topics are not covered in this HTML5 Canvas course?
The course does not cover external libraries or frameworks for canvas manipulation, such as Fabric.js or KineticJS. It focuses solely on native HTML5 and JavaScript techniques for drawing and animations, without exploring third-party tools or plugins.
How much time should I expect to dedicate to completing this course?
The course consists of 40 lessons. While the total runtime is not specified, students should anticipate spending additional time on exercises and challenges, such as adding frames to images and solving drawing challenges, to fully grasp the concepts taught.