30 Draw with Code JavaScript Projects for Students (Beginner Coding Activities)

Drawing with code is one of the most effective ways to introduce students to text-based programming. Instead of reading abstract syntax rules, students write a handful of lines and immediately see a picture appear on screen. The connection between code and result is instant and satisfying — exactly the kind of feedback that keeps beginners motivated.

These 30 projects are designed for students who are ready to move from block-based tools like Scratch to real JavaScript. Each project draws a recognizable object — a car, a flower, a robot, a castle — using only simple drawing functions like circle(), rect(), triangle(), and line(). No loops, no conditions, no prior JavaScript experience required. Just coordinates, colors, and shapes.

All projects run directly in the browser on codeguppy.com with zero setup. Students type, run, and see their drawing come to life in seconds.

Tip for educators: Print each project on a separate sheet of paper and hand the pages to students without telling them what the drawing will be. Let them type the code and discover the result themselves — this "mystery project" approach turns a typing exercise into a guessing game and dramatically increases engagement. You can run an entire class period where every student is silently focused, racing to see their mystery picture revealed.

Tips for Typing in the Programs

Typing in programs from a piece of paper is a great way to teach kids about coding. Since it requires close attention to detail, students will also develop useful skills that go beyond coding.

Here are a few tips to make sure programs are typed in correctly:

  • Type carefully and completely. Ask students to type each program exactly as it appears on the paper — every letter, number, and punctuation mark matters. Skipping or mistyping even one character can stop the program from working.

  • Programs are case sensitive. circle() and Circle() are not the same thing. Ask students to match the case of every command exactly as it appears on the paper.

  • Run the program as you go. To avoid accumulating errors, encourage students to run the program from time to time — but only after the current line is fully typed. Running is as easy as pressing the big Run button in the top-right corner of the code editor.

  • Debug together. If the computer shows an error, sit down with the student and compare the typed program line by line against the paper. Most errors are small typos and are easy to spot once you look carefully.

Download the PDF Booklet

This activity is also available as a PDF booklet with additional explanations, tips, and printable versions of all 30 projects — ideal for handing directly to students in a classroom or coding club setting.

Download Draw with Code Booklet

You can also download versions in other languages (such as Romanian, Italian, Spanish, Portuguese, Portuguese BRA, Serbian SRB, Serbian СРБ, Marathi, Hungarian, and Croatian) from the Download page.

Project 1: Car

A green car cruising under a bright yellow sun. Students learn how rectangles and circles combine to form a recognizable vehicle, and how layering shapes creates depth.

Project 2: Flower

A cheerful red flower with yellow petals rising from a green stem against a blue sky. Students see how circle() and ellipse() can suggest organic, natural shapes.

Project 3: Balloon

A single golden balloon floating against a bright blue sky, with a string hanging below. A minimal project that shows how a few shapes and a line can tell a clear visual story.

Project 4: Snowman

A classic three-circle snowman with a carrot nose, button eyes, a dotted smile, and a stick in each hand. Students practice stacking circles of different sizes and adding small details.

Project 5: House

A cozy house with a triangular roof, two cross-pane windows, a door with a knob, and a chimney — set against a blue sky and green lawn. A perfect introduction to building composite scenes.

Project 6: House with Tree

The house gets a companion — a leafy tree stands to the left, and a stylized sun with rays floats in the sky. Students learn that a scene is built one element at a time.

Project 7: Tree with Cubes

An abstract tree made of stacked, differently-shaded green rectangles on a brown trunk. A great conversation starter about using simple geometry to suggest natural forms.

Project 8: Robot

A friendly blue robot standing at attention, complete with glowing eyes, a grid display on its chest, and a traffic-light panel on the wall. Students practice precise rectangle placement.

Project 9: Boat

A purple sailboat with a golden sail navigating calm blue water, with three orange birds flying overhead. A compact scene that uses triangle() for both sail and hull.

Project 10: Smiley

A big yellow smiley face on a green background, with a wide red smile drawn using arc(). This is often students' first encounter with the arc function — and it clicks immediately.

Project 11: Trees

Two layered pine trees built from stacked triangles in progressively lighter greens, standing on a snowy ground. Students see how repeating a pattern at a different position creates a scene.

Project 12: Mushroom

A whimsical mushroom with a red cap covered in white spots, set on a grass-and-soil background. The arc() function creates the rounded cap shape — a useful technique to highlight.

Project 13: Pizza

A top-down view of a pizza on a plate, loaded with pepperoni, olives, and pineapple. Students practice placing many circles and triangles precisely across the canvas.

Project 14: Mouse

A cartoon mouse face constructed from triangles, circles, and whisker lines. The large triangular head and prominent ears make this one instantly recognizable when it appears.

Project 15: Train

A locomotive with a detailed cabin, round wheels with silver hubs, a cowcatcher, and puffs of smoke drifting from the stack. Students build confidence combining many different shapes.

Project 16: City

A colorful skyline of four buildings in pink, gold, purple, and red, each with lit windows and a door — plus a lone tree on the right. A great project for students who enjoy architecture.

Project 17: Cat

A sitting cat with pointed ears, slanted eyes, whisker-line details, and delicate paw marks at the bottom. Students practice mixing triangles, circles, and arcs to build animal characters.

Project 18: Bird

A detailed perched bird with a speckled breast, folded wing, beady eye, and a beak made from a triangle. Twig-like legs add the finishing touch. A rewarding challenge for patient students.

Project 19: Big House

A grand two-story house with a wide porch, decorative columns, multiple windows, two-tone roof sections, and a chimney with rising smoke. Students tackle a more complex scene with many parts.

Project 20: Castle

A fairy-tale castle with three towers, crenellated battlements, arched windows, waving flags, and a moat. One of the most impressive outputs in the set — students love the reveal.

Project 21: Bear

A brown bear with round ears, wide eyes, a large dark snout, and a teal-and-cyan outfit. Simple in structure but full of character — a favorite for younger students.

Project 22: Pac-Man

The classic arcade character, mouth open and ready to chomp three red pellets, on a dark background. Students use arc() to cut the opening — a satisfying use of the function.

Project 23: Burger

A stacked burger with a seeded bun, green lettuce, and a meat patty — served with a tall drink in a cup with a straw. A fun, appetizing project that students enjoy typing.

Project 24: Dog

A square-snouted dog with floppy ears, stubby legs, paw lines, and an expressive face. Students learn that even very geometric, blocky shapes can look endearing.

Project 25: Frog

A green frog sitting at the water's edge, with bulging eyes, two tiny nostrils, and a wide smile drawn with arc(). The half-submerged pose is achieved with simple rectangle clipping.

Project 26: House 2

A second house design — this one with two connected sections, a distinctive roof with a chimney, decorative smoke, and a sunny sky. Comparing it with House 1 is a great class discussion prompt.

Project 27: Ladybug

A red ladybug with six legs, antennae, white eyes, black pupils, and spotted wings. One of the most intricate projects in the set — students who finish this one feel genuinely accomplished.

Project 28: Smiley Robot

A smiling gray robot with glowing eyes, a screen showing a grin, articulated arms, and sturdy legs. Combining the robot and smiley themes makes for a crowd-pleasing result.

Project 29: Balloons

Two balloons — a large golden hot-air balloon with a basket, and a smaller red balloon — floating against a cloudy blue sky. Students draw strings and lines with confidence after this one.

Project 30: Trucks

Two trucks sharing a gray road under a blue sky: a red flatbed and a yellow crane truck with a swinging arm. Several colorful cargo packages complete the scene. A great final challenge.

Build Your Own Draw with Code Activities

These 30 projects are just the beginning. Once you see how well the mystery-project approach works in the classroom, you will want to build your own.

Start by sketching a simple drawing on paper — an animal, a vehicle, a food item, a holiday scene — then translate each element into drawing commands. Keep it to 20–40 lines of code for a beginner-friendly activity. Use a limited color palette and stick to basic shapes.

A few ideas to get you started:

  • Seasonal themes — pumpkins for autumn, snowflakes for winter, eggs for spring
  • Student favorites — let students vote on the next mystery project
  • Curriculum tie-ins — draw diagrams from science class (a cell, a planet, a water cycle)
  • Local landmarks — a recognizable building from your town or school

Share your creations with other educators on codeguppy.com. The platform is free to use in the classroom, requires no installation, and works on Chromebooks, tablets, and any device with a browser. For a structured JavaScript curriculum with illustrated slides and lesson plans, visit codeguppy.com/curriculum.html.

Credits

These programs draw upon the following projects and websites:

Read more blog articles Browse JavaScript projects

About codeguppy

CodeGuppy is a FREE coding platform for schools and independent learners. If you don't have yet an account with codeguppy.com, you can start by visiting the registration page and sign-up for a free account. Registered users can access tons of fun projects!

Follow @codeguppy on Twitter for coding tips and news about codeguppy platform. For more information, please feel free to contact us.