Last active
August 30, 2017 07:34
-
-
Save j1r1k/f27db8fd002fe0d4dc5e2c0cc62f26a4 to your computer and use it in GitHub Desktop.
PureScript by Example: Chapter 9 (Canvas Graphics) exercise 9.8.2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
i need to create more arc inside the same canvas
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
}