PureScript by Example: Chapter 9 (Canvas Graphics) exercise 9.8.2

RandomCircle.purs

module RandomCircle where

-- 2. (Medium) Use the RANDOM and DOM effects to create an application which renders a circle with
--    random position, color and radius to the canvas when the mouse is clicked.

import Prelude

import Data.Maybe

import Data.Traversable (for)

import Control.Monad.Eff
import Control.Monad.Eff.DOM
import Control.Monad.Eff.Random

import Graphics.Canvas

import Data.Int (round)

import Color (fromInt, toHexString)

main = do
  Just canvas <- getCanvasElementById "canvas"
  ctx <- getContext2D canvas

  node <- querySelector "#canvas"
  for node $ addEventListener "click" $ do

    x <- random
    y <- random
    r <- random
    c <- random

    let color = toHexString $ fromInt $ round (c * 256.0 * 256.0 * 256.0)

    setFillStyle color ctx
    setStrokeStyle "#FFFFFF" ctx 

    let path = arc ctx 
         { x     : x * 600.0
         , y     : y * 600.0
         , r     : r * 300.0
         , start : 0.0
         , end   : Math.pi * 2.0
         }

    fillPath ctx path
    strokePath ctx path

    return unit

module Main where

import Prelude

import Control.Monad.Eff (Eff)
import Data.Maybe (Maybe(..))
import Graphics.Canvas as C
import Partial.Unsafe (unsafePartial)

main :: Eff (canvas :: C.CANVAS ) Unit
main = void $ unsafePartial do
Just getjus <- C.getCanvasElementById "htmlcanvasid1"
getarc <- C.getContext2D getjus

void $ C.setFillStyle "#146eff" getarc
C.fillPath getarc $ C.arc getarc
{ x : 200.0
, y : 200.0
, r : 100.0
, start : 4.8
, end : 1.5
}

i need to create more arc inside the same canvas