Canvas

Canvas is a widget that can be used to draw graphics using a canvas context. Canvas context is a subset of the HTML5 CanvasRenderingContext2D. Includes Composite

Example:

new tabris.Canvas({ left: 0, top: 0, right: 0, bottom: 0 })
  .on("resize", function(canvas, bounds) {
    var ctx = canvas.getContext("2d", bounds.width, bounds.height);
    ctx.moveTo(0, 0);
    // ...
  })
  .appendTo(page);

The following CanvasRenderingContext2D methods are supported:

  • save
  • restore
  • beginPath
  • closePath
  • lineTo
  • moveTo
  • bezierCurveTo
  • quadraticCurveTo
  • rect
  • arc
  • scale
  • rotate
  • translate
  • transform
  • setTransform
  • clearRect
  • fillRect
  • strokeRect
  • fillText
  • strokeText
  • fill
  • stroke
  • measureText

The following CanvasRenderingContext2D properties are supported:

  • lineWidth
  • lineCap
  • lineJoin
  • fillStyle
  • strokeStyle
  • font
  • textAlign
  • textBaseline

Methods

getContext(contextType, width, height)

Parameters:

  • contextType: string, the context identifier. Only "2d" is currently supported.
  • width: number, the width of the canvas context to create
  • height: number, the height of the canvas context to create

Returns: CanvasContext

Returns the drawing context with the given size.

See also