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

ES6 - JavaScript Improved (Udacity) Udacity
Udacity

ES6 - JavaScript Improved (Udacity)

Updates to the JavaScript language. ECMAScript 6, or ES6, has brought about a ton of changes to the JavaScript programming language. In this course, you'll explore those changes to learn about the latest features and improvements to the language including new keywords, arrow functions, the Class syntax, Promises, and so much more. Discover how much cleaner and more concise your JavaScript code can be!

Self Paced
Self-Paced
Web Tooling & Automation (Udacity) Udacity
Udacity,Google

Web Tooling & Automation (Udacity)

Gulp, Sass, and BabelJS, Oh My! In this course, you’ll learn how to setup your development, get super productive during daily work and iteration, prevent yourself and your site from disasters and save a lot of time and effort with automatic optimization and automation. Finally, you’ll learn how to do all this while being confident your code runs on a multitude of devices in the real world.

Self Paced
Self-Paced
Online Games: Literature, New Media, and Narrative (Coursera) Coursera
Vanderbilt University

Online Games: Literature, New Media, and Narrative (Coursera)

Intended for both newcomers who are curious about video games and experienced gamers who want to reflect on their passion, this course will explore what happens to stories, paintings, and films when they become the basis of massively multiplayer online games. The Lord of the Rings trilogy—the novels, films, and video game—are our central example of how “remediation” transforms familiar stories as they move across media.

Oct 12th 2026
5-12 Weeks
JavaScript and the DOM (Udacity) Udacity
Udacity

JavaScript and the DOM (Udacity)

Dynamically control the browser. JavaScript is an extremely powerful programming language. One place where its power truly shines is using it to control a web page. Through this course, you'll learn about the Document Object Model (DOM), how it's created, and what capabilities it provides. Then you'll use JavaScript and the DOM to add, delete, or alter page content; control page styling, and respond to user actions.

Self Paced
Self-Paced
Kotlin for Android Developers (Udacity) Udacity
Udacity

Kotlin for Android Developers (Udacity)

Convert an Android app from Java to Kotlin. In this course, Aaron Sarazan, Lead Software Engineer at Capital One and a leading advocate for Kotlin, demonstrates how to take a basic Android app in Java and convert it to Kotlin, teaching you key features of the Kotlin programming language along the way. This is an efficient, fast-paced introduction to Kotlin for experienced Java programmers.

Self Paced
Self-Paced
Intro to AJAX (Udacity) Udacity
Udacity

Intro to AJAX (Udacity)

Making Asynchronous Requests with jQuery. In this course you will learn how to make asynchronous requests with JavaScript (using jQuery’s AJAX functionality), and gain a better understanding of what’s actually happening when you do so. You will also learn how to use data APIs so you can take advantage of freely accessible data in your applications, including photo results, news articles and up-to-date data about the world around us.

Self Paced
Self-Paced
Intro to jQuery (Udacity) Udacity
Udacity

Intro to jQuery (Udacity)

Manipulating Websites with Ease. jQuery is the most popular JavaScript library today, in use by over 60% of the top 100,000 most visited websites. This course will teach you how to use jQuery’s core features - DOM element selections, traversal and manipulation. You'll also learn how to read and make sense of jQuery's documentation, making it easy for you to go beyond the methods taught in this class and take advantage of jQuery's full array of features!

Self Paced
Self-Paced
JavaScript Testing (Udacity) Udacity
Udacity

JavaScript Testing (Udacity)

Developing Apps with Confidence. In this course you'll learn how to write JavaScript applications with confidence, using the red-green-refactor workflow. You'll write comprehensive suites of tests that validate your application is functioning as intended at all times. You'll start by exploring how other industries use a variety of tests and the value it provides. You'll then start writing your very own tests, using the Jasmine testing framework. Finally, you'll start developing your very own address book application using the red-green-refactor workflow and explore a variety of scenarios including testing asynchronous functions.

Self Paced
Self-Paced
Swift for Developers (Udacity) Udacity
Udacity

Swift for Developers (Udacity)

Your Next Programming Language. This course offers a quick practical introduction to Swift basics, including types, variables, constants, and functions. It combines syntax exercises with hands-on iOS development in Xcode. By the end of the course students will build their first iOS app, an app that creates and displays song lyrics customized to user input.

Self Paced
Self-Paced