HTML5 Canvas (Udacity)

Offered by Udacity,
HTML5 Canvas (Udacity)

From Pixels to Animation! Canvas is an HTML5 element which gives you drawable surface inside your web pages you can control with JavaScript. Powerful enough to use for compositing images and even creating games. In this course, through several sample projects, you’ll learn how to use the canvas; how to make compositions using shapes, images, and text; how to create effects and filters on images and how to create animations.

Class Deals by MOOC List - Click here and see Udacity's Active Discounts, Deals, and Promo Codes.

Why Take This Course
You should take this course if you want to move beyond static HTML tag content and build on your JavaScript skills to make interactive and engaging experiences. Maybe you want to start on the journey of creating a game or complex animations, maybe you want to create visually compelling compositions like infographs, or maybe you just want to make memes. Canvas to the rescue.
This is a recommended course for the Front-End Web Developer nanodegree, and will help you complete the Frogger project.

What You Will Learn

Lesson 1
HTML5 Canvas Basics

  • Learn what the Canvas is and how it affects graphics in the browser.
  • Learn how to make compositions with text and images with memes!
  • Practice using the API.

Lesson 2
From Pixels to Animation

  • Learn how images are stored by the Canvas2D context.
  • Learn how to modify images by applying various effects and filters.
  • Create your first animation!

Prerequisites and Requirements
To succeed in this course, we expect you to have some HTML and JavaScript experience. You should at minimum understand loops, functions, and conditional statements(if/else). Udacity’s JavaScript Basics course and HTML/CSS course are good preparation for this course.

Go to Class
MOOC List is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Related Courses

C++ For Programmers (Udacity) Udacity
Udacity

C++ For Programmers (Udacity)

Learn features and constructs for C++. C++ for Programmers is designed for students who are familiar with a programming language and wish to learn C++. This course focuses on 'how' as opposed to 'what'. For example, in the lesson on functions, we do not teach what a function is, but rather how to create a function in C++. The lessons are taught by several different instructors who have used C++ in their professional careers, so students get to experience different perspectives.

Self Paced
Self-Paced
Game Theory II: Advanced Applications (Coursera) Coursera
Stanford University,The University of British Columbia

Game Theory II: Advanced Applications (Coursera)

Popularized by movies such as "A Beautiful Mind", game theory is the mathematical modeling of strategic interaction among rational (and irrational) agents. Over four weeks of lectures, this advanced course considers how to design interactions between agents in order to achieve good social outcomes. Three main topics are covered: social choice theory (i.e., collective decision making and voting systems), mechanism design, and auctions.

Oct 5th 2026
5-12 Weeks
Gamification (Coursera) Coursera
University of Pennsylvania

Gamification (Coursera)

Gamification is the application of game elements and digital game design techniques to non-game problems, such as business and social impact challenges. This course will teach you the mechanisms of gamification, why it has such tremendous potential, and how to use it effectively.

Sep 28th 2026
5-12 Weeks
Asynchronous JavaScript Requests (Udacity) Udacity
Udacity

Asynchronous JavaScript Requests (Udacity)

Fetch Data Asynchronously. This course covers everything a developer needs to know to asynchronously send and receive data in their web applications. You'll dive into how asynchronous requests work by using the XHR object to create and send asynchronous requests for image and news article data. Then, you'll see how you can perform async requests more easily using third-party libraries and APIs like jQuery's Ajax and the Fetch API.

Self Paced
Self-Paced
What is Programming? (Udacity) Udacity
Udacity

What is Programming? (Udacity)

A Coding Dictionary. The world of development can be daunting with all of its lingo and jargon. This course will help demystify the cryptic terms that developers use on a daily basis. You'll learn about how the web functions, what a programmer does each day, why version control is so important, and how communication on the internet happens.

Self Paced
Self-Paced
Website Performance Optimization (Udacity) Udacity
Udacity,Google

Website Performance Optimization (Udacity)

The Critical Rendering Path. You will learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages. In this short course, you’ll learn about the Critical Rendering Path, or the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites. From there, you’ll start exploring and experimenting with tools to measure performance and simple strategies to deliver the first pixels to the screen as early as possible.

Self Paced
Self-Paced
Browser Rendering Optimization (Udacity) Udacity
Udacity,Google

Browser Rendering Optimization (Udacity)

Building 60 FPS Web Apps. Performance matters to users. Web developers need to build apps that react quickly and render smoothly. Google performance guru Paul Lewis is here to help you destroy jank and create web apps that maintain 60 frames per second performance. You'll leave this course with the tools you need to profile apps and identify the causes of jank. You'll explore the browser's rendering pipeline and uncover patterns that make it easy to build performant apps.

Self Paced
Self-Paced
Object Oriented Programming in Java (Udacity) Udacity
Udacity

Object Oriented Programming in Java (Udacity)

Build Interactive Java Programs. This course will introduce you to some of the most powerful programming concepts in Java, including: objects, inheritance and collections. You will learn how to use these object-oriented programming concepts in code examples, discover how these concepts are used in applications that require user input, and understand the benefits of mastering these concepts in Java.

Self Paced
Self-Paced