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 }