Installation

Installation guide for Tatami Canvas.

Setting up Tatami is straightforward, by adding one web component into your DOM. When the component mounts it will then fetch WebAssembly binaries and continues to sets up the canvas, commands, Tatami Class and the rest of the library.

Using Tatami Canvas from CDN

1

Step 1: Add the script from CDN

Begin by adding script and styles into your pages HEAD section

<script type="module" src="https://cdn.jsdelivr.net/npm/tatami-canvas@latest/dist/tatami-canvas.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tatami-canvas@latest/dist/tatami-canvas.css">
2

Step 2: Add Web Component

Add Tatami Canvas component to your DOM. It will automatically fill the available space.

<div id="app">
  <tatami-canvas
    paper-width="1920"
    paper-height="1024"
    paper-color="#ffffff"
  ></tatami-canvas>
</div>
3

Step 3: You're ready!

4

Step 4: Build Interactions

Now you can start building UI interactions with Tatami commands. Here is an example of a slider that will adjust the brush size.

<input
  tatami="brush-size"
  type="range"
  min="1"
  max="100"
  step="1"
  value="20"
/>