Learn HTML5 Canvas for beginners

Course Curriculum

Chapter 1: Learn about how to use HTML5 canvas

Lecture 1: Introduction to the course

Lecture 2: Introduction to what HTML5 canvas is and how it can be used

Lecture 3: Course resources further reading

Lecture 4: HTML5 Course Resources

Lecture 5: HTML5 prepare basic setup HTML

Lecture 6: Pixel locations in HTML5 canvas

Chapter 2: Basics of HTML5 Canvas Drawing

Lecture 1: How to create a canvas in HTML5

Lecture 2: HTML5 connect canvas to JavaScript

Lecture 3: HTML5 drawing on your canvas JavaScript

Lecture 4: HTML5 rectangles

Lecture 5: shadows in canvas

Lecture 6: Source code for shadows

Lecture 7: Drawing line on Canvas HTML5

Lecture 8: Draw Full Circle

Lecture 9: Drawing Curves with HTML5 How to use Bezier Curve

Lecture 10: Curves Loops and useful tips for HTML5 canvas drawing

Lecture 11: HTML5 canvas updates

Lecture 12: Source Code for Challenge 1

Lecture 13: Solution to Challenge 1

Chapter 3: More options to Drawing on HTML5 canvas

Lecture 1: Introduction to Colors HTML5 Canvas

Lecture 2: RGB RGBA colors working with alphas and loops

Lecture 3: All about lines in HTML5 Canvas

Lecture 4: Dashes in lines

Lecture 5: How to work with createLinearGradient

Lecture 6: How to use createRadialGradient in HTML5 canvas

Lecture 7: Practice HTML5 methods

Chapter 4: HTML5 canvas Text and Images

Lecture 1: How to add text to html5 canvas

Lecture 2: Source code for adding text

Lecture 3: Difference between SVG and Canvas images

Lecture 4: Use HTML5 Canvas to create images on the fly

Lecture 5: HTML5 canvas using onpage images into canvas

Lecture 6: Image Scaling with HTML5 canvas

Lecture 7: Image slicing with HTML5 canvas

Lecture 8: Challenge 2 add frame to image

Lecture 9: Source for frame

Lecture 10: Solution to Challenge 2

Lecture 11: Source code for working with images

Chapter 5: HTML5 canvas more complex drawing

Lecture 1: Using save and restore

Lecture 2: HTML5 moving all the content

Lecture 3: HTML5 how to resize your canvas

Lecture 4: HTML5 rotations

Lecture 5: HTML5 canvas custom transformations

Lecture 6: Source code for transformations

Chapter 6: HTML5 canvas Animations

Lecture 1: introduction to animation

Lecture 2: Add object for animation

Lecture 3: Creating canvas drawings

Lecture 4: How to clear HTML5 canvas

Lecture 5: Animations requestAnimationFrame

Lecture 6: Source code for animation

Chapter 7: Bonus Section

Lecture 1: Bonus Lecture