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.

After you draw a shape, how do you fill it?

pen violet, 5, 'miter'
for [1..5]
  fd 100
  rt 144
fill gold

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.
• But 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

How many points does a triangle have?

pen green, 25
for [1..3]
  fd 100
  rt 120

Try the demo above. When you use a thick pen, a triangle has no points! That is because the corners are rounded.

In the web Canvas standard, there are three styles of line joins: 'miter', 'bevel', and 'round'. The turtle defaults to round, but we can try another shape by adding the name of the style to the pen command. (It has to be in quotes.)

pen green, 25, 'miter'
for [1..3]
  fd 100
  rt 120

The 'miter' line join makes a sharp mitered corner. Only one problem: we haven't joined that last corner yet. We could move the turtle a little bit (with fd 1) to get a corner.

Or we can use the "fill" command with no color, which will close up any shape that ends where it starts.

pen green, 25, 'miter'
for [1..3]
  fd 100
  rt 120
fill()

Triangles should have three points, and now they do!

The turtle pen on has had some changes recently. There are some new things you may want to try.

The original round turtle pen was great for geometric line art: all the round line ends and corners were easy to join up.

But what happens when you want to draw a bar graph?

jumpto -50, -50
pen orange, 50
fd 100
jumpto 50, -50
pen red, 50
fd 50

Although the right red bar (50) should be half the size of the left orange bar (100), it's not. The red bar is too big because of the huge circular pen.

The solution is to use a flat pen. In the web Canvas standard, a pen that draws flush flat line ends has a 'butt' lineCap (as opposed to 'round' or 'square'). With the turtle pen, you can get this by adding 'butt' (in quotes) as another argument to the pen function

jumpto -50, -50
pen orange, 50, 'butt'
fd 100
jumpto 50, -50
pen red, 50, 'butt'
fd 50

That's better!

Howdy Pencil Code users!

Today I am starting the Pencil Code Blog. It is a place where we can talk about changes, tips, project ideas, and neat things going on with Pencil Code.

There is a lot new on Pencil Code recently, and there is more stuff coming, so watch the blog!