Development
Web Development
HTML5
HTML5 Canvas Ultimate Guide
4.6 (166 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,364 students enrolled

HTML5 Canvas Ultimate Guide

Most powerful drawings, animations, web applications and games with HTML5 Canvas by using JavaScript
4.6 (166 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,364 students enrolled
Created by Alperen Talaslıoğlu
Last updated 6/2019
English
English
Preview this course
HTML5 Canvas Ultimate Guide
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 10 hours on-demand video
  • 82 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learning basics of HTML5 Canvas
  • Advanced skills of drawing on Canvas
  • Able to build HTML5 games with Canvas
  • Display data on Canvas
  • Animations and Transitions on Canvas
  • Clear and solid understandings of Canvas
Course content
Expand all 73 lectures 09:55:36
+ – Drawing Lines and Paths on Canvas
10 lectures 01:05:58
Draw Lines
05:29
Drawing Complex Lines
04:54
Line Caps
04:40
Line Joins
05:30
Shadows
06:19
Lab Session: Drawing Complex Shapes
08:15
Drawing Curves
06:36
Drawing Quadratic Curves
05:52
Drawing Bezier Curves
05:29
Lab Session: Drawing a Heart
12:54
+ – Drawing Shapes on Canvas
6 lectures 42:20
Drawing Rectangles
07:02
Lab Session: Drawing a Chessboard
08:57
Drawing Circles
03:55
Lab Session: Drawing a Pac-Man
07:39
Lab Session: Drawing Polygons
10:14
Shadows on Shapes
04:33
+ – Drawing Texts on Canvas
5 lectures 32:45
Drawing Basic Texts
04:38
Styling Texts
06:16
Lab Session: Drawing 3D Texts
08:12
Positioning Texts
09:16
Shadows on Texts
04:23
+ – Project : Building a Open Source Bar Chart Library
9 lectures 01:47:55
Creating Project Structure
13:25
Creating the Chart Configurations
13:03
Creating the Canvas and Performing the Pre-Operations
15:56
Drawing Axes
09:35
Drawing Labels
12:18
Drawing Guidelines
11:01
Drawing Bars
13:09
Pushing to GitHub
11:01
Readme.md
08:27
+ – Drawing Images on Canvas
3 lectures 24:22
Drawing Images
08:00
Lab Session: Drawing Pokemon Characters From A Tile
06:30
Lab Session: Filtering Images
09:52
+ – Canvas Advanced Topics
4 lectures 18:48
save() and restore() the canvas state
05:13
Save Canvas as an Image
02:36
Patterns
03:37
Gradients
07:22
+ – Animations
4 lectures 36:07
Animation Basics
11:23
Lab Session: Bouncing Ball
08:17
Sprite Animation
06:01
Lab Session: Running A Game Character
10:26
+ – Transformations on Canvas
4 lectures 21:02
Scale
06:08
Rotate
02:58
Translate
02:44
Transform
09:12
+ – Making Physics with Animations on Canvas
7 lectures 57:39
Introduction
04:16
Velocity
04:54
Acceleration
06:25
Vertical Projection
08:04
Horizontal Projection and Angular Projection
07:14
Momentum on One Axis
13:00
Momentum on Two Axes
13:46
Requirements
  • Basic knowledge on HTML5
  • Basic knowledge on CSS3
  • Basic knowledge on JavaScript
  • Curiosity to learn new technologies
  • Eagerness to become an expert frontend developer
Description

*** The most comprehensive HTML5 Canvas Course in Udemy! ***

*** Real English Captions (not auto-generated) ***

Canvas was initially created by Apple in 2004 and it has been going on to shape the modern next generation web applications. In today's modern web development world, it is one of the most demanding skills to create games, web graphics, drawings and data visualizations without any plugin like old Flash-dependent days. 

In this course, we will cover all of the key points of the Canvas API together. This course is a best chance for whom is willing to learn this edge technology or improve personal skills set. Every topics are supported by comprehensive html canvas examples, projects and lab sessions to support and reinforce the learning curve.

The topic covered in the course are mainly :

  • Basics of Canvas

  • Understanding the basic math behind canvas and coordinate systems

  • Drawing paths and lines on canvas

  • Drawing shapes like rect, circle and more complex polygons

  • Writing texts on canvas

  • Text effects

  • Displaying images on canvas

  • Playing videos on canvas

  • Transformations

  • Animations

  • DOM interactions

  • Events

Let's dive into the Canvas ocean together!

If you have any questions related to the lectures, do not hesitate to ask!


javascript canvas library, html canvas image, html5 canvas examples with source code, canvas developer guide, canvas api github, canvas api java, canvas api assignments, canvas api live

Who this course is for:
  • New beginners
  • Anyone who wants to learn HTML5 Canvas in depth
  • Anyone who wants to improve HTML5 Canvas skills
  • Anyone who wants to refresh HTML5 Canvas knowledge
  • Experts who wants to reinforce themselves
Featured review
Cluck Norris
Cluck Norris ( 61 courses, 21 reviews )
a year ago
I enjoyed this course because the instructor essentially walks you through canvas as if he was just going through the docs one function at a time but then groups them together into interesting and fun challenges, making the course very comprehensive and the first thing I did when I completed the course was build my own clone of Raiden (the old arcade shooter game).