module Main where

--
-- Basic example of how to draw on an HTML5 Canvas using Haskell
-- compiled to Javascript with the Haste compiler (https://haste-lang.org/)
--
-- SPDX-FileCopyrightText: Chris Pressey, the original author of this work, has dedicated it to the public domain.
-- For more information, please refer to <https://unlicense.org/>
-- SPDX-License-Identifier: Unlicense
--
-- Build with something like:
--
--     hastec --make HasteCanvas.hs -o haste-canvas.js
--
-- Then use in HTML5 page something like:
--
--     <canvas id="the-canvas" width=640 height=200></canvas>
--     <button id="draw-button">Draw</button>
--     <script src="haste-canvas.js"></script>
--

import Haste.DOM              -- https://haste-lang.org/docs/haddock/0.5.5/Haste-DOM.html
import Haste.Events           -- https://haste-lang.org/docs/haddock/0.5.5/Haste-Events.html
import Haste.Graphics.Canvas  -- https://haste-lang.org/docs/haddock/0.5.5/Haste-Graphics-Canvas.html


main = do
    Just drawButtonElem <- elemById "draw-button"
    onEvent drawButtonElem Click handleClick
    where
        handleClick _ = do
            Just canvasElem <- getCanvasById "the-canvas"
            render canvasElem $ makePicture
            return ()

makePicture = do
    setStrokeColor $ RGB 255 0 0
    stroke $ line (0, 0) (100, 100)