Skip to content

farism/mint-canvas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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/>
  }
}

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

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
}