canvas-monad.purs

import Control.Apply

import Graphics.Canvas (getCanvasElementById, getContext2D)
import Graphics.Canvas.Free

closed path = beginPath *> path <* closePath

filled shape = shape <* fill

withContext shape = save *> shape <* restore

scene :: Graphics Unit
scene = withContext do
  setFillStyle "#FF0000"

  filled $ closed do
    moveTo 0 0
    lineTo 50 0
    lineTo 25 50

main = do
  canvas <- getCanvasElementById "canvas"
  context <- getContext2D canvas

  runGraphics context scene

dom-monad.purs

import Data.DOM.Free
 
doc :: Element
doc = div [ _class := "image" ] $ do
  elem $ img [ src := "logo.jpg"
             , width  := 100
             , height := 200
             ]
  text "Functional programming for the web!"