Pencil Code Reference > fill

fill for making filled shapes

fill can be used to fill a shape after it is drawn

pen violet, 10
for [1..3]
  fd 100
  rt 120
fill blue

Jumping and Filling

fill actually works by filling and retracing the path that you have drawn with the current pen.

• If you happen to use jump, pen up, or pen down, it is still the same path, and the discontinuous parts will be filled as separate islands.
• If you switch pen colors or use pen null, it will end the path and start a new one.
• If you don't draw the ends of your shapes together, fill will not draw the missing sides: it will just color in what you have drawn.

pen gold, 10
rt 180, 50
pen orangered, 10
for [1..3]
  jump 25, 25
  lt 90
  rt 180, 50
fill orange

Perfect Paths

Sometimes you have a path that cannot be drawn perfectly by tracing one line at time.

The program below tries to draw a 'bevel' angle with 'square' line caps. Since the turtle traces out one line at a time, the angle is not a pretty bevel. It is a mess of overlapped square line caps.

pen red, 25, 'square', 'bevel'
fd 100
rt 120
fd 100

The way to neatly draw this kind of shape is to draw the whole path at once. You can do this by asking the turtle to trace out an invisible path with pen path. Then use fill to set the drawing options all at once. Fill does not need to fill the inside of the shape: it can be used to just perfectly stroke the shape!

The options to fill are passed as an object, and the properties should be indented with punctuation as in this example:

pen path
fd 100
rt 120
fd 100
fill
  strokeStyle: red
  lineWidth: 25
  lineCap: 'square'
  lineJoin: 'bevel'

Here is a summary of the options that can be passed to fill:

These style properties are from the HTML5 2D Canvas standard.