A lightweight HTML canvas framework with support for event forwarding and automatic adjustment for screen resolution.
npm install tavla
Run the example by installing the framework
followed by npm run example.
const { Tavla, Rect, Draggable } = require('tavla')
/*
Select your canvas element
*/
const el = document.querySelector('canvas')
const tavla = new Tavla(el)
/*
Make yourself a red rectangle
*/
const rectangle = new Rect(0, 0, 100, 120)
rectangle.fillColor = 'red'
/*
Add the rectangle to the view
and start rendering it immediately
*/
tavla.root.addChild(rectangle)
/*
Allow the rectangle to be dragged around
*/
Draggable.make(rectangle)Creates a new instance of Tavla.
Options
{
drawBoundingBoxes: Boolean // Defaults to false
pixelRatio: Number // Defaults to window.devicePixelRatio
isWorker: Boolean // Whether or not the script is running in a worker, if this is true Tavla will skip any DOM-specific logic
loop: Boolean // Whether to start a draw-loop or not, defaults to true
}read-only
An instance of View, use this to add your own views.
Manually trigger a draw of the current state.
Create a new view. Coordinates are relative to the view's parent and drawn from the top-left.
Contains a unique string used to identify the view.
read-only
Get the view's frame.
read-only
A convenience wrapper to get the view's position relative to it's parent.
This returns the same thing as view.frame.pos.
read-only
A convenience wrapper to get the view's size.
This returns the same thing as view.frame.size.
A boolean indicating whether or not this view should be clipping its children, defaults to false.
A numerical value between 0 and 1 determining the opacity with which the view will be drawn. Opacity will be accumulated downwards through the stack.
Set the composite operation used when drawing the view's children, must be a value supported by the ctx.globalCompositeOperation property.
read-only
Returns the topmost view that the view is a descendant of.
read-only
Returns the view's parent or null if not yet added as a child.
read-only
Get the view's position relative to the root view.
Update the position of the view's frame with coordinates relative to the root-view.
Remove the view from its parent view.
Add a view as a child to this view. The child will start rendering immediately.
Remove a child-view.
Get a flattened array of all descendants to this view.
Draw the view and its children to the provided CanvasRenderingContext2D.
This method may be overridden by subclasses of View, but note that all overrides should also call view.drawChildren(ctx).
Trigger all children of the view to be drawn onto the provided CanvasRenderingContext2D.
Draw the view's wireframe onto the provided CanvasRenderingContext2D.
Listen for an event dispatched by the view.
view.on('click', (e, didDispatchChildren) => {
// e contains the event payload
// didDispatchChildren is a boolean indicating whether this event was passed on to a child view or not. I.e. if true, the event was meant for a child to this view.
})Similar to view.on but the handler will only be called once.
Make a view draggable and enable its drag-event.
This must only be called once per view and after the view has been added as a child to another view.
Tip! Listen for the adopted event which will be fired when the view has been given a parent.
Turn the view into a mask by setting the ctx.globalCompositeOperation = 'destination-out'.
This will make the view and its children mask any underlying views so that the background becomes visible.
Note that the view must have a fillColor or strokeColor in order to be a mask.
Clamp a view's coordinates to the coordinates of another view. The clamped view will follow the anchor view.
Undo a clamp. This will leave the view in place at its current position
Rect inherits from View.
Create a new rectangle with a position relative to its parent view.
Get or set the stroke-color for the rectangle.
Defaults to 'transparent'.
Get or set the stroke-width for the rectangle.
Defaults to 0.
Get or set the fill-color for the rectangle.
Defaults to 'transparent'.
RoundRect inherits from Rect.
Set the border-radius of all of the rectangle's corners.
Set the top-left border-radius of the rectangle.
Set the top-right border-radius of the rectangle.
Set the bottom-right border-radius of the rectangle.
Set the bottom-left border-radius of the rectangle.
Draw an image. Inherits from View.
Create a new image with an image source. The source may be a data-url or image path in the form of a string.
Change the image-source. The new source will be drawn on the next frame.
Draw an SVG-string as an image. Inherits from Image.
Create a new SVG instance from an SVG-string.
Change the SVG-source. The new source will be drawn on the next frame.
Draw some text. Inherits from View.
Create a new Text instance.
The text node's text content
The text node's font size.
Defaults to 16px.
The text node's font family.
Defaults to Helvetica.
The text node's alignment. One of start, end, left, right or center.
Defaults to start.
The text node's direction. One of ltr, rtl, inherit.
Defaults to inherit.
The text node's baseline setting. One of top, hanging, middle, alphabetic, ideographic or bottom.
Defaults to top.
Create a new frame. Coordinates are calculated from the top-left.
Get coordinates for the frame's center-point.
The following are events fired by instances of View.
Fired when the view was clicked.
Fired when the cursor moved over the view.
Fired when the cursor clicked down on the view.
Fired when the cursor let go of a click on the view.
Fired when the view has been added using view.addChild() to another view.
Will only be fired if the view was made draggable with Draggable.make(view)
Fired when a view has stopped being dragged.