simple purescript-signal + purescript-canvas example

Main.purs

module Main where

import Prelude

import Data.Maybe
import Control.Monad.Eff
import Graphics.Canvas as C
import Signal as S
import Signal.DOM as S

main = do
  Just canvas <- C.getCanvasElementById "canvas"
  context <- C.getContext2D canvas
  frames <- S.animationFrame
  let game = S.foldp (const update) initialState frames
  S.runSignal (render context <$> game)

type State
  = { pos :: Number, step :: Number }

initialState = { pos : 0.0, step : 2.0 }

update state =
  if state.pos >= 200.0
  then { pos : 199.0, step : -state.step }
  else if state.pos <= 0.0
  then { pos : 1.0, step : -state.step }
  else { pos : state.pos + state.step, step : state.step }

render context state = do
  clearCanvas context
  drawRect context state
  pure unit

clearCanvas ctx = do
  C.setFillStyle "#1B1C1B" ctx
  C.fillRect ctx { x: 0.0, y: 0.0, w: 800.0, h: 500.0 }

drawRect ctx state = do
  C.setFillStyle "#0088DD" ctx
  C.fillRect ctx { x: 300.0 + state.pos, y: 100.0, w: 30.0, h: 30.0 }

--I need to add more than one arc in the program

module Main where

import Prelude

import Control.Monad.Eff #(Eff)
import Data.Maybe (Maybe(..))
import Graphics.Canvas (CANVAS, getCanvasElementById, rotate, getContext2D, arc, setFillStyle, fillPath)
import Partial.Unsafe (unsafePartial)

main :: Eff (canvas :: CANVAS ) Unit
main = void $ unsafePartial do
Just getcanvas <- getCanvasElementById "htmlcanvasid3"
getarc <- getContext2D getcanvas

void $ setFillStyle "#d6e5ff" getarc
fillPath getarc $ arc getarc
{ x : 0.0
, y : 190.0
, r : 80.0
, start : 4.8
, end : 1.5
}