Lesson Planet
Search educational resources
  • Sign In Try It Free
  • AI Teacher Tools
    • Discover Resources Search reviewed educational resources by keyword, subject, grade, type, and more
    • Curriculum Manager (My Content) Manage saved and uploaded resources and folders To Access the Curriculum Manager Sign In or Join Now
    • Browse Resource Directory Browse educational resources by subject and topic
    • Curriculum Calendar Explore curriculum resources by date
    • Lesson Planning Articles Timely and inspiring teaching ideas that you can apply in your classroom
    • Our Story
    • Frequently Asked Questions
    • Testimonials
    • Contact Us
  • Pricing
  • School Access
    • Your school or district can sign up for Lesson Planet — with no cost to teachers
      Learn More
  • Sign In
  • Try It Free

Hi, what do you want to do?

Create a lesson plan
Create a lesson plan
Generate resources with 80+ AI teacher tools
Generate resources with 80+ AI teacher tools
Search 200,000 instructional videos
Search 200,000 instructional videos
Find a teaching resource
Find a teaching resource
Challenge: Your First Painting App InteractiveChallenge: Your First Painting App Interactive
Publisher
Khan Academy
Resource Details
Curator Rating
Educator Rating
Not yet Rated
Grade
6th - Higher Ed
Subjects
STEM
1 more...
Resource Types
Activities & Projects
1 more...
Audiences
For Teacher Use
1 more...
Duration
30 mins
Instructional Strategies
Guided Practice
2 more...
Usage Permissions
Creative Commons
BY-NC-SA: 3.0
cc
Interactive

Challenge: Your First Painting App

Curated and Reviewed by Lesson Planet
This Challenge: Your First Painting App interactive also includes:
  • Java Script Guide
  • Student Reference
  • Join to access all included materials

Ever wonder how those neat painting applications work? Completing this coding activity will give you some insight. First, starting with a simple function that draws a small circle as the mouse moves around the screen, adjust the function to draw the circles only when the mouse is pressed. Lastly, color the circles and remove the outline of the circle. Wow! You've created the first part of your very own painting app! 

4 Views 5 Downloads

Concepts

javascript, computer code, Computer Programming, coding, computer drawing, animation

Additional Tags

programming in javascript, drawing and animation coding

Pros

  • Simple, easy-to-follow steps guide learners as they work through the coding activity
  • The results from changes in code are immediately displayed so coders can develop a deeper understanding of their code

Cons


See similar resources:

App

Lightbot Jr 4 Coding Puzzles

Sprite Box
Learning how to write computer code has never been so much fun! Given control of their very own robots, children create simple programs in order to solve a series of challenges and develop their problem solving skills.
2nd - 8th STEM
Instructional Video

Learn to Code: Working with Variables

Lifehacker
Building on prior knowledge about defining variables, the second video in this series on coding explains how to perform simple operations with data in JavaScript. Introducing first the concept of statements, the video goes on...
6 mins 9th - Higher Ed STEM
CCSS: Adaptable
Instructional Video

The Power of the Docs, Intro to JS: Drawing and Animation, Computer Programming

Khan Academy
While learning to code is an interesting academic pursuit in its own right, it also has other learning benefits. For one, coders learn how to learn. They continually explore, test, and draw conclusions about how certain things work. The...
6 mins 5th - Higher Ed STEM
Instructional Video

Learn to Code: Variables and Basic Data Types

Lifehacker
Explore the fundamentals of coding in Javascript with the first video of this four-part series. After learning about the three basic data types — strings, numbers, and Boolean — young programmers are taught how to...
7 mins 9th - Higher Ed STEM
CCSS: Adaptable
Instructional Video

More While Loops: Balloon Hopper

Khan Academy
Starting with an empty computer screen for a coder can be as intimidating as a bare canvas to a painter or a blank sheet of paper to a writer. Where do you start? If you know what you are trying to build, then you just pick something and...
6th - Higher Ed STEM
Instructional Video

Intro to Drawing

Khan Academy
Leap right into programming in JavaScript with this first video in the series. Start off with drawing a rectangle. Remember computers only know what you tell them. So you need to specify exactly where on the screen you want the...
6 mins 5th - Higher Ed STEM
Instructional Video

More Drawing!

Khan Academy
Now let's expand our coding to include ellipses, rectangles, and lines using this easy-to-follow video. We are also adding some formality to the language we use by defining the following terms: function, parameters, pixels, and the x and...
5 mins 5th - Higher Ed STEM
Interactive

Challenge: Simple Shapes!

Khan Academy
Now practice drawing a rectangle, ellipse, circle, and line by writing your own JavaScript code. Don't know where to start? No problem, you will be guided through creating every line of code. Getting an error message? Again, no problem,...
6th - Higher Ed STEM
Interactive

Challenge: Ice Cream Code

Khan Academy
Practice adding color to your simple JavaScript picture. Three layers of ice cream in a bowl with a cherry on top, gives your beginning coders a tasty challenge. 
6th - Higher Ed STEM
Lesson Plan

Using Simple Commands

Code.org
Turtles might be slow, but class will zoom by when your pupils build a program in which reptiles draw a grid. Using App Lab and JavaScript, class members build a program to find the most efficient way to draw an image of a...
9th - 12th STEM
Try It Free
© 1999-2026 Learning Explorer, Inc.
Teacher Lesson Plans, Worksheets and Resources

Sign up for the Lesson Planet Monthly Newsletter

Open Educational Resources (OER)

  • Health
  • Language Arts
  • Languages
  • Math
  • Physical Education
  • Science
  • Social Studies
  • Special Education
  • Visual and Performing Arts
View All Lesson Plans

Discover Resources

  • Our Review Process
  • How it Works
  • How to Search
  • Create a Collection

Manage Curriculum

  • Edit a Collection
  • Assign to Students
  • Manage My Content
Contact Us Site Map Privacy Policy Terms of Use