Overview

Miso.Canvas is a typed Haskell wrapper around the browser's HTML5 Canvas 2D API. It lets you draw graphics imperatively inside a miso View without leaving Haskell.

The central abstraction is the Canvas monad:

type Canvas a = ReaderT CanvasContext2D IO a

Every drawing operation (fillRect, arc, fillText, …) is a Canvas action that reads the implicit CanvasRenderingContext2D and calls the corresponding JavaScript method.

Quick start

Wire a canvas element into your view using canvas. The runtime calls init once when the DOM node is created and draw after every VDOM update, passing the state returned by init:

import           Miso
import           Miso.Canvas
import qualified Miso.CSS       as CSS
import qualified Miso.CSS.Color as Color
import qualified Miso.Html.Property as HP

view :: Model -> View Model Action
view m =
  canvas
    [ HP.width_ "800", HP.height_ "480" ]
    (\_ -> pure ())          -- init: no canvas-level state needed
    (\() -> drawScene m)    -- draw: closure over current model

drawScene :: Model -> Canvas ()
drawScene m = do
  clearRect (0, 0, 800, 480)
  fillStyle (color Color.cornflowerblue)
  fillRect  (0, 0, 800, 480)
  fillStyle (color Color.white)
  font      "24px sans-serif"
  fillText  ("Hello, miso!", 32, 48)

canvas vs canvas_

Two element constructors are provided:

• canvas — the standard variant. Acquires a "2d" CanvasContext2D automatically and runs init / draw inside the Canvas monad.
• canvas_ — the escape hatch. init and draw receive raw IO callbacks and a DOMRef, letting you hand the element off to a third-party JavaScript library (e.g. Three.js, WebGL) that manages its own context.

Styling

fillStyle and strokeStyle accept a StyleArg, which can be a plain Color (via color), a Gradient (via gradient), or a Pattern (via pattern_):

fillStyle (color Color.red)
fillStyle (gradient myGradient)
fillStyle (pattern_ myPattern)

Note: color and color have the same name but different types. Import Miso.CSS qualified to avoid ambiguity when using both in the same file.

See also

• Miso.CSS.Color — Color type and named colors
• Miso.CSS — CSS property DSL for non-canvas styling
• Miso.FFI — lower-level JS interop used internally