Mint Canvas

Mint wrapper for browser Canvas APIs

Simple Example

A simple example looks like this

component Main {
  fun componentDidMount {
    case Dom.Canvas.fromDomElement(canvas) {
      Maybe::Just(el) =>
        {
          el
          |> Canvas.rect(10, 20, 150, 100)
          |> Canvas.fill

          ""
        }

      Maybe::Nothing =>
        ""
    }
  }

  fun render : Html {
    <canvas as canvas/>
  }
}

Demo Website

Most of the examples on MDN's CanvasRenderingContext2D site have been ported to mint-canvas and can be viewed on the demo website.

Demo Examples folder

Or directly view the example source files.

Patterns

Chaining

Most Canvas APIs return the passed in canvas Dom.Canvas. This allows you to chain calls with |>.

canvasEl
|> Canvas.beginPath
|> Canvas.setFillStyle(CanvasFillStyle::String("#ff6"))
|> Canvas.fillRect(0, 0, dims.width, dims.height)
|> Canvas.beginPath
|> Canvas.setFillStyle(CanvasFillStyle::String("blue"))
|> Canvas.moveTo(20, 20)
|> Canvas.lineTo(180, 20)
|> Canvas.lineTo(130, 130)
|> Canvas.closePath
|> Canvas.fill
|> Canvas.clearRect(10, 10, 120, 100)

Setting properties

Instance properties become setter functions. Introduces enums where it makes sense.

canvasEl
|> Canvas.setLetterSpacing(10)
|> Canvas.setImageSmoothingQuality(CanvasImageSmoothingQuality::Low)

Context2d

All APIs take Dom.Canvas as the first paramter. getContext('2d') is called under the hood.

/*
Adds a rectangle to the current path.

Like other methods that modify the current path, this method does not directly render anything. To draw the rectangle onto a canvas, you can use the `fill()` or `stroke()` methods.
*/
fun rect (
  el : Dom.Canvas,
  x : Number,
  y : Number,
  width : number,
  height : number
) : Dom.Canvas {
  `#{el}.getContext('2d').rect(#{x}, #{y}, #{width}, #{height})`
  el
}