proto-repl-charts.canvas

Defines functions for opening and drawing to an HTML canvas in Atom. See the
draw function for details.

clear

(clear name)
Clears the canvas with the given name.

clear-rect

(clear-rect)(clear-rect x y height width)
Returns a command to clear the display.

command-set-error-msg

draw

(draw name)(draw name command-sets)
Opens a new canvas with the given name or updates an existing canvas with the
given name. `draw` is a wrapper over the JavaScript API for the canvas 2d
context.

## High Level API

Draw takes a sequence of commands that instruct it what to draw. There are
functions in this namespace that return predefined commands to draw simple
objects like lines, rectangles, and circles.

This code would draw a thick black line over top of an outlined red circle.

(draw "Black Line and Red Circle"
      [(clear-rect)
       (stroke-style "red")
       (line-width 1)
       (stroke-circle 200 300 70)

       (stroke-style "black")
       (line-width 5)
       (line 100 200 400 400)])

## Low Level API

Draw takes any of the following:

* a command
* a sequence of commands (also called a command set)
* a sequence of command sets

A command is a vector containing the keyword identifying the function to call
on the Canvas 2d context along with the arguments that function takes. An
example command is `[:fillRect 10 10 100 100]` which is equivalent to the
JavaScript `ctx.fillRect(10, 10, 100, 100);` This would draw a filled in
rectangle from the upper left point 10,10 that's 100 pixels tall and 100
pixels wide.

The following link is a good reference for the functions available on the 2d
context: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

Example:

 This code will draw a line from the point 1,1 to 100,100

 (draw "Simple Line")
   [[:beginPath]
    [:moveTo 1 1]
    [:lineTo 100 100]
    [:stroke]])

 That's equivalent to this JavaScript code.

 var ctx = canvas.getContext('2d');
 ctx.beginPath();
 ctx.moveTo(1,1);
 ctx.lineTo(100,100);
 ctx.stroke();

### Setting Values
Setting values on the context can be done via the :set command.

[:set :lineWidth 5] is equivalent to ctx.lineWidth = 5;

fill-circle

(fill-circle x y radius)
Returns a command set to draw a filled in circle.

fill-rect

(fill-rect x y height width)
Returns a command set to draw a filled in rectangle.

fill-style

(fill-style str)
Returns a command to set the fill style such as the color. Example 'gray' or
'#808080'. See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
 Pass to the draw command to apply to future commands.

font

(font str)
Returns a command to set the font. Example "10px sans-serif" Pass to the
draw command to apply to future commands.

height

(height name)
Returns the height of the named canvas. Note the canvas must have been previously
opened for this to work.

line

(line x1 y1 x2 y2)
Returns a command set to draw a line between the two points.

line-width

(line-width w)
Returns a command set to set the line width. Pass to the draw command to apply
to future commands.

partition-command-sets-xducer

A transducer that concatenates together command sets, validates them, and
then splits the command set into sets of 100 commands to send at a time to
GUI side for drawing.

rotate

(rotate angle)
Returns a command set to add a rotation to the transformation matrix. angle
is expressed in radians.

scale

(scale size)(scale x y)
Returns a command set to add a scaling transformation to the canvas units by x
horizontally and by y vertically. If one argument is provided they're both
scaled evenly.

stroke-circle

(stroke-circle x y radius)
Returns a command set to draw the outline of a circle.

stroke-polygon

(stroke-polygon points)
Returns a commands set to draw a polygon connecting the given points. points
is a vector of tuples of x and y for each point.

stroke-rect

(stroke-rect x y height width)
Returns a command set to draw the outline of a rectangle.

stroke-style

(stroke-style str)
Returns a command to set the stroke style such as the color. Example 'gray' or
'#808080'. See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
 Pass to the draw command to apply to future commands.

text

(text string x y)
Creates a command set to draw some text at the given point.

text-align

(text-align str)
Returns a command to set the text alignment. Valid values 'start', 'end',
'left', 'right' or 'center'. Pass to the draw command to apply to future
commands.

transform-reset

(transform-reset)
Returns a command set to resets the transformations using the identity matrix

translate

(translate x y)
Returns a command set to add a translation transformation by moving the canvas
and its origin x horizontally and y vertically.

width

(width name)
Returns the width of the named canvas. Note the canvas must have been previously
opened for this to work.