The JavaScript Library To Build Canvas User Interfaces

Build user interfaces with the HTML5 canvas element as easy as it has never been

Approachable

A truly simple and yet powerful API to build user interfaces using elements.

Extensible

Completely extensible, providing you ways to build your own types of elements.

Versatile

It can be used for different purposes, giving you a way to do anything you want.

Build

Build the elements of your user interface.

const image = canvasUI.view.new("logo-image", "image");

image.set("size", { width: 50, height: 50 });
image.set("src", "../img/logo.svg");

Place

Place them in the way you want them to be.

image.layoutParams.set("align", {
  horizontal: "middle",
  vertical: "middle",
});

Interact

Interact with them to make them do something.

image.listeners.add("click", function (image) {
  const size = image.get("size");
  image.set("size", { width: size.width * 2, height: size.height * 2 });
});