leinwand

Method chaining for the canvas 2d api.

leinwand is a small library that wraps the canvas 2d api. It provides some helper functions as well as a chaining api for most methods that exist on CanvasRenderingContext2D.

Example usage

let canvas = document.getElementById('myCanvas');
let l = new Leinwand(canvas);

l
  .fillStyle('red')
  .mt(50, 50)
  .lt(250, 70)
  .lt(166, 99)
  .lt(166, 199)
  .closePath()
  .fill()
  .stroke()
  .beginPath()
  .fillStyle('blue')
  .circle(50, 50, 40)
  .fill()
  .stroke();

Chaining methods

The following methods can be called exactly like the ones of CanvasRenderingContext2D except that they return the Leinwand object.

arc
arcTo
beginPath
bezierCurveTo
clearRect
clip
closePath
createLinearGradient
createRadialGradient
drawImage
ellipse
fill
fillRect
fillText
lineTo
moveTo
quadraticCurveTo
rect
resetClip
restore
rotate
save
scale
setLineDash
setTransform
stroke
strokeRect
strokeText
transform
translate

Aliases

mt is an alias for moveTo. lt is an alias for lineTo.

Setters/Getters

If you want to set the fillStyle of your context you'd usually have to do something like this ctx.fillStyle = 'red'. To allow chaining your api calls in leinwand you do l.fillStyle('red'). This does the same as l.setFillStyle('red'). To read a property you can either use l.getFillStyle() or l.fillStyle(). This works with all of these properites:

fillStyle
font
globalAlpha
globalCompositeOperation
lineCap
lineDashOffset
lineJoin
lineWidth
miterLimit
strokeStyle
textAlign
textBaseline

Additionally this also works with width and height. So you can do l.setHeight(400) (or l.height(400)) to change the height of the canvas element to 400.

Passthrough methods

There are methods on CanvasRenderingContext2D that do return something. So we can't chain on these methods. They behave exactly as if they were called on the context.

getImageData
getLineDash
measureText
putImageData

Additional methods

l.clear()

Clears the canvas. If you have applied any transforms to the context this may not do what you want (try clearWithTransforms).

l.circle(x, y, r)

Draws a path in form of a circle at x/y with a radius of r.

l.strokeCircle(x, y, r)

Strokes a circle at x/y with a radius of r.

l.fillCircle(x, y, r)

Fills a circle at x/y with a radius of r.

l.rotateContextAt(x, y, r)

Rotates the context at x/y by r radians.

l.resetCanvas()

Resets the canvas.

l.resetTransforms()

Resets all the transforms.

l.clearWithTransforms()

Clears the canvas event if there have been transforms applied. The tansforms are preserved.

l.rectCenteredAt(x, y, w, h)

Draws a path of a rectangle centered at x/y with a widht of w and a hight of h.

l.fillRectCenteredAt(x, y, w, h)

Fills a rectangle centered at x/y with a widht of w and a hight of h.

l.strokeRectCenteredAt(x, y, w, h)

Strokes a rectangle centered at x/y with a widht of w and a hight of h.

l.fillTextCenteredAt(text, x, y)

Fills the the text text centered at x/y.

l.strokeTextCenteredAt(text, x, y)

Strokes the the text text centered at x/y.

l.drawImageCenteredAt(...)

Like drawImage on CanvasRenderingContext2D this method has 3 different signatures.

 l.drawCenteredAtImage(image, dx, dy);
 l.drawCenterdAtImage(image, dx, dy, dWidth, dHeight);
 l.drawCenteredAtImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

This does what drawImage does except that the image is centered at dy/dy. For more infos on the parameters hava a look at the mdn aritcle on drawImage.

l.getContext()

Get the CanvasRenderingContext2D. Just in cave leinwand does not provide some functionality.

l.getCanvas()

Get the underlying HTMLCanvasElement.

Release History

2018-02-16 v0.6.0 implement getters and add more utility functions
2018-02-09 v0.5.0 add more utility functions
2016-07-12 v0.4.0 add drawImage method
2015-12-05 v0.3.0 add more utility functions
2015-09-24 v0.2.0 small bug fixes
2014-11-02 v0.1.0 Initial version

tillarnold / leinwand Goto Github PK

leinwand's Introduction