YoVDO

Learning HTML Canvas

Offered By: LinkedIn Learning

Tags

HTML & CSS Courses Web Development Courses Javascript Courses Animation Courses HTML Canvas Courses

Course Description

Overview

Want to create rich and immersive web experiences with HTML and JavaScript? Learn how to use the Canvas element to build 2D graphics and animations right on screen.

Syllabus

Introduction
  • Graphics programming with JavaScript
  • What you should know
1. Overview of Canvas
  • Interesting canvas examples
  • The canvas element
  • The canvas drawing context
2. Basic Canvas Drawing Techniques
  • Colors and styles
  • Rectangles
  • Lines
  • The canvas state
  • Arcs
  • Paths
  • Bezier and quadratic curves
  • Drawing text
3. Complex Canvas Drawing
  • Drawing shadows
  • Using patterns
  • Using gradients
  • Images and video
  • Clipping paths
4. Advanced Drawing APIs
  • Using translate
  • Using scaling
  • Using rotation
  • Custom transformations
  • Compositing and globalAlpha
  • Compositing and globalAlpha example
  • Manipulating raw pixels
5. Practical Examples
  • Building an image slideshow
  • Using smooth transitions
  • Basic animation
  • Double-buffered animation
Conclusion
  • Next steps

Taught by

Joe Marini

Related Courses

Programming Languages
University of Virginia via Udacity
Building a Basic Website
University of Massachusetts Amherst via Independent
iDESWEB, Introducción al desarrollo web
Miríadax
Web Engineering II: Developing Mobile HTML5 Apps
Technische Hochschule Mittelhessen via iversity
Web Application Architectures
University of New Mexico via Coursera