Fix canvas drawing logic.

src/Canvas.js

@@ -11,22 +11,28 @@ exports.get2DContext = function(canvasId) {
 exports.initContext = function(color) {
   return function initContext(context) {
     return function() {
-      context.beginPath();
       context.lineWidth = 2;
       context.strokeStyle = color;
       return context;
     };
   };
 };
 
-exports.beginStroke = function(context) {
+exports.beginPath = function(context) {
   return function() {
     context.beginPath();
     return context;
   };
 };
 
-exports.endStroke = function(context) {
+exports.closePath = function(context) {
+  return function() {
+    context.closePath();
+    return context;
+  };
+};
+
+exports.stroke = function(context) {
   return function() {
     context.stroke();
     return context;

src/Canvas.purs

@@ -13,9 +13,11 @@ foreign import get2DContext :: String -> Effect Context2D
 
 foreign import initContext :: CanvasStyleString -> Context2D -> Effect Context2D
 
-foreign import beginStroke :: Context2D -> Effect Context2D
+foreign import beginPath :: Context2D -> Effect Context2D
 
-foreign import endStroke :: Context2D -> Effect Context2D
+foreign import closePath :: Context2D -> Effect Context2D
+
+foreign import stroke :: Context2D -> Effect Context2D
 
 foreign import lineTo :: Distance -> Distance -> Context2D -> Effect Context2D
 
@@ -36,6 +38,10 @@ colorToCanvasStyle col = case col of
   Red -> "red"
   Green -> "green"
   Blue -> "blue"
+  Yellow -> "yellow"
   Purple -> "purple"
+  Cyan -> "cyan"
+  Magenta -> "magenta"
   Black -> "black"
+  White -> "white"
   CustomColor str -> str

src/CanvasInterpreter.purs

@@ -62,17 +62,17 @@ interpretTurtleProg'' = runFreeM interpret
 
         interpret (Right angleDeg rest) = do
           let angle = rad angleDeg
-          modify_ $ \(Turtle x y angle0 p) -> Turtle x y (angle0 + angle) p
+          modify_ \(Turtle x y angle0 p) -> Turtle x y (angle0 + angle) p
           pure rest
 
         interpret (PenUp rest) = do
           modify_ $ \(Turtle x y angle _) -> Turtle x y angle false
-          pure ((\prog -> prog <> [endStroke]) <$> rest)
+          pure ((\prog -> prog <> [stroke]) <$> rest)
 
         interpret (PenDown rest) = do
           Turtle x y angle p <- get
           put (Turtle x y angle true)
-          pure ((\prog -> prog <> [beginStroke, moveTo x y]) <$> rest)
+          pure ((\prog -> prog <> [beginPath, moveTo x y]) <$> rest)
 
         interpret (UseColor col rest) = do
           pure ((\prog -> prog <> [setStrokeStyle $ colorToCanvasStyle col]) <$> rest)
@@ -87,6 +87,4 @@ renderTurtleProgOnCanvas canvasId prog =
   get2DContext canvasId >>=
   initContext (colorToCanvasStyle Purple) >>=
   moveTo 0.0 0.0 >>=
-  beginStroke >>=
-  interpretTurtleProg prog >>=
-  endStroke
+  interpretTurtleProg prog

src/Language.purs

@@ -7,7 +7,7 @@ import Control.Monad.Free (Free, liftF)
 
 type Angle = Number
 type Distance = Number
-data Color = Red | Green | Blue | Purple | Black | CustomColor String
+data Color = Red | Green | Blue | Yellow | Purple | Magenta | Cyan | Black | White | CustomColor String
 
 data TurtleCmd a = Forward Distance a
                  | Arc Distance Angle a

src/Main.purs

@@ -9,15 +9,23 @@ import Effect (Effect)
 
 main :: Effect Context2D
 main = renderTurtleProgOnCanvas "turtleCanvas" $ do
+  color Purple
   star
-  penUp
+
   forward 40.0
   left 100.0
-  penDown
+
   color Red
   star
 
+  forward 40.0
+  left 100.0
+
+  color Green
+  star
+
 star = do
+  penDown
   right 144.0
   forward 100.0
   right 144.0
@@ -28,3 +36,4 @@ star = do
   forward 100.0
   right 144.0
   forward 100.0
+  penUp