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.

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
  strokeStyle: red
  lineWidth: 25
  lineCap: 'square'
  lineJoin: 'bevel'

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

fill option possible values
fillStyle red, plum, rgb(40,30,200), '#cde', hsla(120,.5,.5,.5)
strokeStyle also any color
lineWidth any number of pixels, e.g., 25
lineCap 'butt', 'round' (default), 'square'
lineJoin 'bevel', 'miter', 'round' (default)
miterLimit a number for sharpness of miter joins, e.g., 10
lineDash any array of pixel lengths, e.g., [10, 10]
lineDashOffset any number of pixels, e.g., 5

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