Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

arrow_back Draw inside the lines


In this add-on, you will program your game so users can only draw in the white spaces.

That way, users cannot draw outside the lines.

Select the pencil sprite.

Look at the code.

Right now, the pen is ready to draw when the mouse button is pressed down.

To avoid drawing outside the lines, the pen should only draw when the mouse is down AND the sprite is inside the white space.

In the "if" portion of the "if-then" block, add an "and" block from the operators menu.

Add the "mouse down?" to one side of the “and” block.

One the other side, add a "touching color" block.

Click the color inside the block, then click the white drawing area.

Try it out.

It isn't working.

The pen still draws even when it is not touching the white space.

When the pen is touching the edges of the stage, it still draws.

In computer science, sometimes the first solution you try doesn't work, and that's okay.

If one idea doesn't work, keep trying until you find one that does.

Here's another potential solution.

Take out the "touching color" block, and put it back in the blocks palette.

The drawing end of the pencil is black, so see if you can get the pen to draw *only* when the color black is touching the color white.

Add a "color is touching color" block from the sensing menu.

Click inside the first color area, and click the color black.

Then, click inside the second color area, and click the color white.

Try it out now!


Now the user can draw only in the white spaces.

Now it's your turn: Program the pencil sprite to draw if the mouse button is pressed down AND the color black is touching the color white.

Choose an Add-On
Color Picker (Part 1 of 2)
Lets the user change the color of the pen.
Color Picker (Part 2 of 2)
Lets the user change the color of the pen.
Pen Size Adjustment
Allow the users to change the size of the pen.
Monkey Animation
Make the Monkey do a little dance and introduce the game.
Draw inside the lines
Make it impossible to draw outside the white spaces.
Sound Effects
Add sound to your game.
arrow_backward Back
Next arrow_forward
  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!