Learn: Draw Styles

We have already learned how to create basic shapes with the Evy drawing commands move, line, rect and circle. We will now learn how to style these shapes with the color, width, clear, and grid commands.

color

The color command changes the color of the drawing pen. Evy supports all CSS color values, including semi-transparent ones. CSS (Cascading Style Sheets) is a language used to style websites. CSS colors can be complex, but Josh Comeau has written a great article explaining them in detail. You can start by using the simpler named CSS colors, such as "red", "blue", and "lightseagreen". For a complete list of named CSS colors, see the Mozilla Developer documentation. For example, if you want to change the color of the pen to red, you would type color "red".

move 50 50 color "gold" circle 30 color "darkorange" circle 20 color "red" circle 10

width

The width command sets the thickness of the line drawn by the pen. The following code will draw a series of lines of different thicknesses:

width 10 line 30 30 width 1 line 60 60 width 0.1 line 90 90

clear

The clear command clears the canvas.

move 50 50 circle 30 clear rect 5 40

The clear command clears the canvas to a default color of "white". However, you can optionally specify a color to clear the canvas to. If you do, the whole canvas background will be set to the given color.

move 50 50 circle 10 clear "green"

grid

The grid command is a helper function that draws a thin, gray grid that is parallel to the x and y axes, with each grid line spaced 10 units apart. This can be useful for understanding the different positions on the canvas.

Here are two simple programs that demonstrate the difference between using grid and not using it:

color "red" move 50 50 circle 30
color "red" move 50 50 circle 30 grid

Summary

• color s sets the color of the drawing pen.
• width n sets the width of the drawing pen to n units.
• clear, clear s clears the drawing area, optionally setting it to a given color.
• grid draws a thin, gray grid that is parallel to the x and y axes, with each grid line spaced 10 units apart.