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

Writing READMEs (Udacity) Udacity
Udacity

Writing READMEs (Udacity)

In this course, you’ll learn what documentation is and why it’s an important part of the development process. You'll learn how to build a well-structured README that you’ll be able to incorporate into your projects moving forward. By the end of this course, you will have written your very own README file using Markdown.

Self Paced
Self-Paced
Serious Gaming (Coursera) Coursera
Erasmus University Rotterdam

Serious Gaming (Coursera)

Have you ever wondered how playing games can help us to train people, deal with societal challenges or raise awareness of contemporary social issues? In this MOOC you will learn the ins and outs of games that are designed with exactly those purposes in mind: serious games. We will define serious games and discuss the different types that have been developed. We will explain why people like to play them and what impact they may have.

Aug 31st 2026
5-12 Weeks
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.

Aug 31st 2026
5-12 Weeks
Java Programming Basics (Udacity) Udacity
Udacity

Java Programming Basics (Udacity)

Take your first steps towards becoming a Java developer! Learn Java syntax and create conditional statements, loops, and functions. Taking this course will provide you with a basic foundation in Java syntax, which is the first step towards becoming a successful Java developer. You’ll learn how computers make decisions and how Java keeps track of information through variables and data types.

Self Paced
Self-Paced
JavaScript Design Patterns (Udacity) Udacity
Udacity

JavaScript Design Patterns (Udacity)

Organizing Code in a Disorganized World. This course covers methods for organizing your code, both conceptually and literally. You’ll learn the importance of separating concerns when writing JavaScript, gaining hands-on experience along the way. Separating concerns can be done with or without an organizational library or framework. We’ll learn how to separate concerns without one, and then we’ll explore an organizational library together. You’ll also learn strategies for exploring other libraries and frameworks on your own.

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 JavaScript (Udacity) Udacity
Udacity

Intro to JavaScript (Udacity)

Learn the fundamentals of JavaScript, the most popular programming language in web development. JavaScript is the most popular programming language for both front-end and back-end web development. Applications for JavaScript span from interactive websites to the Internet of Things, making it a great choice for beginners and experienced developers looking to learn a new programming language.

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
Learn Swift Programming Syntax (Udacity) Udacity
Udacity

Learn Swift Programming Syntax (Udacity)

From Optionals to Closure Expressions. Swift is a language created by Apple specifically for iOS and OS X development. It’s fast, concise, and comes with tools which make it easier than ever to visualize one's code. This course focuses on the syntax of the Swift programming language. By the end of the course, students should be able to apply Swift essentials to building iOS apps and employ Swift's more unique elements, like optional types and switch statements, with confidence.

Self Paced
Self-Paced