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

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
Introduction à la programmation orientée objet (en Java) (Coursera) Coursera
École Polytechnique Fédérale de Lausanne

Introduction à la programmation orientée objet (en Java) (Coursera)

Ce cours introduit la programmation orientée objet (encapsulation, abstration, héritage, polymorphisme) en l'illustrant en langage Java. Il présuppose connues les bases de la programmation (variables, types, boucles, fonctions, ...). Il est conçu comme la suite du cours « Initiation à la programmation (en Java) ».

Aug 16th 2026
5-12 Weeks
Intro to HTML and CSS (Udacity) Udacity
Udacity

Intro to HTML and CSS (Udacity)

In this course, you'll learn the fundamentals web development, along with best practices and professional problem-solving techniques using Developer Tools. Throughout this course, you'll learn about the underlying structure of the web - HTML. You'll learn how to use this tree-like structure to create websites. You'll also learn how to apply styling to a website through CSS. You'll learn about CSS syntax, selectors, and units. Along the way, you'll also learn about code editors and a browser's Developer Tools.

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