If you're seeing this message, it means we're having trouble loading external resources for Khan Academy.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Computing

Computer programming

Learn how to program drawings, animations, and games using JavaScript & ProcessingJS, or learn how to create webpages with HTML & CSS. You can share whatever you create, explore what others have created and learn from each other!
Create New JS Program Create New Webpage Browse Creations
Help Requests Project Evaluations Community Questions
A thumbnail for: Intro to JS: Drawing & Animation

Intro to JS: Drawing & Animation

In these tutorials, you'll learn how to use the JavaScript language and the ProcessingJS library to create fun drawings and animations. If you've never programmed before, start here to learn how!
A thumbnail for: Advanced JS: Games & Visualizations

Advanced JS: Games & Visualizations

Now that you know how to program in JavaScript and make basic drawings and animations, how could you use that knowledge to make games and visualizations?
A thumbnail for: Advanced JS: Natural Simulations

Advanced JS: Natural Simulations

Learn how to use JavaScript, ProcessingJS, and mathematical concepts to simulate nature in your programs. These tutorials are a derivative of "The Nature of Code" book by Daniel Shiffman (natureofcode.com), used under CC BY-NC.
A thumbnail for: HTML/CSS: Making webpages

HTML/CSS: Making webpages

Learn how to use HTML and CSS to make webpages. HTML is the markup language that you surround content with and it tells the browser about the parts of your page like headings, lists, and tables. CSS is the stylesheet language that you style the page with, which tells the browser to change the color, font, layout, and more.
A thumbnail for: Meet the Professional

Meet the Professional

What can you do with computer science and programming skills once you've learned them? We've invited people from all around the world and the industry to introduce themselves to you. Find out how diverse our field can be!
Computer programming
Intro to JS: Drawing & Animation
In these tutorials, you'll learn how to use the JavaScript language and the ProcessingJS library to create fun drawings and animations. If you've never programmed before, start here to learn how!
New Program Documentation
Help Requests Project Evaluations Community Questions
All content in “Intro to JS: Drawing & Animation”

Intro to programming

If you've never been here before, check out this introductory video first. Then get coding!

Drawing basics

We'll show you the basics of programming and how to draw shapes.

Coloring

We'll show you how to color and outline your shapes!

Variables

We'll cover how to use variables to hold values, animate your drawings, and more.

Animation basics

Learn how to animate your drawings.

Resizing with variables

Learn how to use variable expressions to resize parts of your drawing relative to other parts. (This requires a bit more math, so if you don't feel you have a good grasp of fractions yet, you can skip over this.)

Text and strings

Learn how to display text on the canvas, resize it, color it, and animate it.

Functions

Make your code more re-usable by grouping it into functions, and then make those functions accept parameters and return values.

Logic and if Statements

Teach your program to make decisions!

Looping

Repeating something over-and-over? Loops are here to help!

Arrays

Store multiple values in your variables with arrays!

Objects

Learn how to store complex data in objects.

Object-Oriented Design

How to use object-oriented concepts in JavaScript to make more re-usable code.

Becoming a better programmer

Now that you understand the basics of programming, learn techniques that will help you be more productive and write more beautiful code.