On this page:
1.6.1 Drawing on a Canvas
start/ cartesian-plane
1.6.2 Interactions with Canvas

1.6 Simple Drawing: "draw.ss"

The teachpack provides two sets of functions: one for drawing into a canvas and one for reacting to canvas events.

Warning: This teachpack is deprecated. Unless you’re solving exercises taken from How To Design Programs, we strongly encourage you to use the world teachpack instead; see Simulations and Animations: "world.ss".

1.6.1 Drawing on a Canvas

DrawColor: (and/c symbol? (one-of/c 'white  'yellow  'red  'blue  'green  'black)) These six colors are definitely provided. If you want other colors, guess! For example, 'orange works, but 'mauve doesn’t. If you apply the function to a symbol that it doesn’t recognize as a color, it raises an error.

(start width height)  true
  width : number?
  height : number?
Opens a width x height canvas.

(start/cartesian-plane width height)  true
  width : number?
  height : number?
Opens a width x height canvas and draws a Cartesian plane.

(stop)  true
Closes the canvas.

(draw-circle p r c)  true
  p : posn?
  r : number?
  c : DrawColor
Draws a c circle at p with radius r.

(draw-solid-disk p r c)  true
  p : posn?
  r : number?
  c : DrawColor
Draws a c disk at p with radius r.

(draw-solid-rect ul width height c)  true
  ul : posn?
  width : number?
  height : number?
  c : DrawColor
Draws a width x height, c rectangle with the upper-left corner at ul.

(draw-solid-line strt end c)  true
  strt : posn?
  end : posn?
  c : DrawColor
Draws a c line from strt to end.

(draw-solid-string p s)  true
  p : posn?
  s : string?
Draws s at p.

(sleep-for-a-while s)  true
  s : number?
Suspends evaluation for s seconds.

The teachpack also provides clear- operations for each draw- operation. The arguments are the same. Note: use clear-rectangle instead of clear-string for now. The color argument for all clear- functions are optional.

1.6.2 Interactions with Canvas

(wait-for-mouse-click)  posn?
Waits for the user to click on the mouse, within the canvas.

DrawKeyEvent: (or/c char? symbol?) A DrawKeyEvent represents keyboard events:
  • char?, if the user pressed an alphanumeric key;

  • symbol?, if the user pressed, for example, an arror key: 'up 'down 'left 'right

Checks whether the user has pressed a key within the window; false if not.

DrawWorld: For proper interactions, using the teachpack requires that you provide a data definition for DrawWorld . In principle, there are no constraints on this data definition. You can even keep it implicit, even if this violates the Design Recipe.

The following functions allow programs to react to events from the canvas.

(big-bang n w)  true
  n : number?
  w : DrawWorld
Starts the clock, one tick every n (fractal) seconds; w becomes the first “current” world.

(on-key-event change)  true
  change : (-> DrawKeyEvent DrawWorld DrawWorld)
Adds change to the world. The function reacts to keyboard events and creates a new DrawWorld.

(on-tick-event tock)  true
  tock : (-> DrawWorld DrawWorld)
Adds tock to the world. The function reacts to clock tick events, creating a new current world.

Stops the world; returns the current world.