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.