Get started

Build a canvas interface with a label and a button.

Import directly in the browser

Load the standalone module from canvas-toolkit.org. Serve your HTML over HTTP or HTTPS.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Canvas Toolkit – First Example</title>

<canvas id="canvas" width="320" height="140"></canvas>

<script type="module">
  import { CApplication, CWidget, CLabel, CPushButton, CPaletteColorRole, CColor } from
    "https://canvas-toolkit.org/lib/canvas-toolkit-lib-0.9.0.js";

  const canvas = document.querySelector("#canvas");
  const app = new CApplication(canvas);

  const root = new CWidget();
  root.setGeometry(0, 0, canvas.width, canvas.height);

  const label = new CLabel(root);
  label.setGeometry(16, 16, 280, 28);
  label.setText("Hello!");
  const palette = label.palette();
  palette.setColor(CPaletteColorRole.Text, new CColor(180, 0, 0));
  label.setPalette(palette);

  const button = new CPushButton(root);
  button.setGeometry(16, 60, 140, 36);
  button.setText("Click me");
  button.clicked.connect(() => {
    label.setText("The button works!");
    palette.setColor(CPaletteColorRole.Text, new CColor(0, 100, 0));
    label.setPalette(palette);
  });

  root.show();
  app.run();
</script>
</html>

Download the standalone JavaScript module

Install the library

Download the browser modules from Download. Extract the archive into your project so that it contains lib/index.js. Serve the directory with an HTTP server.

For a project that uses an npm-compatible bundler, download the package archive and install it locally.

npm install ./canvas-toolkit-lib-0.9.0.tgz

For that setup, import from "canvas-toolkit-lib".

Create an HTML page

Save this as index.html next to main.js and the lib/ directory.

<canvas id="canvas" width="288" height="132" aria-label="Canvas Toolkit button example"></canvas>
<script type="module" src="./main.js"></script>

Add the app

import { CApplication, CWidget, CLabel, CPushButton } from "./lib/index.js";

const canvas = document.querySelector("#canvas");
const app = new CApplication(canvas);
const root = new CWidget();
root.setGeometry(0, 0, canvas.width, canvas.height);

const label = new CLabel(root);
label.setGeometry(16, 16, 240, 28);
label.setText("Hello, Canvas Toolkit!");

const button = new CPushButton(root);
button.setGeometry(16, 60, 160, 36);
button.setText("Click me");
button.clicked.connect(() => label.setText("Button clicked!"));

root.show();
app.run();