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