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

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
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.

Nov 30th 2026
5-12 Weeks
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
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
Building High Conversion Web Forms (Udacity) Udacity
Udacity,Google

Building High Conversion Web Forms (Udacity)

Forms Rock! Any meaningful experience on the web has a form. Whether it's a form made of text boxes, toggles, buttons, checkboxes, or touchable widgets, web developers need to be purposeful about forms to make users happy and increase conversions. In this course, you'll learn best practices for modern forms as taught by Google's Ido Green and Udacity's Cameron Pittman. You'll practice your skills along the way with a few self-directed projects, including an e-commerce checkout and an event planner app!

Self Paced
Self-Paced
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
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