API Documentation

Canvas

Zino UI Canvas is javascript Canvas micro-library, a custom wrapper for working with HTML5 Canvas element. For examples, check out Canvas demo page.

Properties

Key Type Required Description
target HTMLElement Yes HTML DOM element where newly created canvas element will be inserted.
height number No Height of the HTML5 canvas element.
width number No Width of the HTML5 canvas element.

Methods

Method Arguments Description
arc api.arc(cx, cy, radius, startAngle, endAngle) Draw an arc or circle with HTML5 Canvas.
arc api.arc(cx, cy, radius, startAngle, endAngle, anticlockwise)
arcTo api.arcTo(x1, y1, x2, y2, radius) Adds an arc with the given control points and radius to the current subpath, connected to the previous point by a straight line. If two radii are provided, the first controls the width of the arc's ellipse, and the second controls the height. If only one is provided, or if they are the same, the arc is from a circle. In the case of an ellipse, the rotation argument controls the clockwise inclination of the ellipse relative to the x-axis.
arcTo api.arcTo(x1, y1, x2, y2, radiusX, radiusY, rotation)
attr api.attr(attributes) Set attributes to the canvas context.
attr api.attr(key, value)
begin api.begin() Resets the current default path.
bezierCurveTo api.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) Draw a cubic Bezier curve.
bind api.bind(eventType, fn) Attach a handler to an event for the canvas element.
circle api.circle(cx, cy, radius) Draw a circle with HTML5 Canvas.
clear api.clear() Clears all pixels on the bitmap in the given rectangle to transparent black.
clip api.clip() Further constrains the clipping region to the current default path or the given path.
close api.close() Tries to close the shape by drawing a straight line from the current point to the start.
commit api.commit() If the rendering context is bound to a canvas, display the current frame.
ellipse api.ellipse(x, y, radiusX, radiusY) Draw an ellipse (oval) using HTML5 Canvas.
fill api.fill() Actually draw the shape to the canvas. Used to paint a solid shape.
fillRect api.fillRect(x, y, width, height) Paints the given rectangle onto the bitmap, using the current fill style.
image api.image(src, dx, dy) Draws the given image onto the canvas. If the image has no image data, throws an InvalidStateError exception.
image api.image(src, dx, dy, dw, dh)
image api.image(src, sx, sy, sw, sh, dx, dy, dw, dh)
line api.line(x1, y1, x2, y2) Draw a line using HTML5 Canvas.
linearGradient api.linearGradient(x0, y0, x1, y1) Returns a CanvasGradient object that represents a linear gradient that paints along the line given by the coordinates represented by the arguments.
lineTo api.lineTo(x, y) Draw a straight line with HTML5 Canvas.
measureText api.measureText(text) Returns a TextMetrics object with the metrics of the given text in the current font.
moveTo api.moveTo(x, y) Create a new subpath with the specified point as its first (and only) point.
pattern api.pattern(src, repetition, callback) Returns a CanvasPattern object that uses the given image and repeats in the direction(s) given by the repetition argument.
quadraticCurveTo api.quadraticCurveTo(cpx, cpy, x, y) Draw a quadratic Bezier curve.
radialGradient api.radialGradient(x0, y0, r0, x1, y1, r1) Returns a CanvasGradient object that represents a radial gradient that paints along the cone given by the circles represented by the arguments. If either of the radii are negative, throws an IndexSizeError exception.
rect api.rect(x, y, width, height) Draw a rectangle with HTML5 Canvas.
resetClip api.resetClip() Create a new clipping region that is the rectangle with the top left corner at (0,0) and the width and height of the coordinate space. The new clipping region replaces the current clipping region.
resetTransform api.resetTransform() Changes the transformation matrix to the identity transform.
restore api.restore() Retrieve the canvas state.
rotate api.rotate(angle) Changes the transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.
save api.save() Save the canvas state.
scale api.scale() Changes the transformation matrix to apply a scaling transformation with the given characteristics.
setTransform api.setTransform(m11, m12, m21, m22, dx, dy) Changes the transformation matrix to the matrix given by the arguments.
stroke api.stroke() Actually draw the shape to the canvas. Used to draw an outlined shape.
strokeRect api.strokeRect(x, y, width, height) Paints the box that outlines the given rectangle onto the bitmap, using the current stroke style.
text api.text(text, x, y) Fills or strokes (respectively) the given text at the given position. If a maximum width is provided, the text will be scaled to fit that width if necessary.
text api.text(text, x, y, maxWidth)
transform api.transform(m11, m12, m21, m22, dx, dy) Changes the transformation matrix to apply the matrix given by the arguments.
translate api.translate(x, y) Changes the transformation matrix to apply a translation transformation with the given characteristics.

Events

Event Arguments Description
No events.