Web Component Props

How to customize Web Component

That quick start example only had some minimum props about paper size and color. There are few more things you can do there.

Paper Size and Color

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

Create Default Paper

By default Tatami will launch with paper. In some cases maybe you don't want to immediately show the paper, then you can use create-default-paper prop. This means you need to load some image to the Tatami in order to get any canvas. for this look into section Loading files into Tatami

<div id="app">
  <tatami-canvas
    ...
    create-default-paper="false"
    ...
  ></tatami-canvas>
</div>

Keyboard Shortcuts

By default Tatami will listen to keystrokes and it has default mappings for panning canvas, changing tools etc. If you want to create your own keyboard shortcuts you should to set keyboard-shortcuts prop to false.

<div id="app">
  <tatami-canvas
    ...
    keyboard-shortcuts="false"
    ...
  ></tatami-canvas>
</div>

Spinner Mode

Tatami has this special feature where you can draw on spinning canvas. If you want to start Tatami into this spinner mode, you can add spinner prop. You can add spinner-speed prop (revolutions per second) of control spinner speed via command or API.

<div id="app">
  <tatami-canvas
    ...
    spinner="true"
    spinner-speed="360"
    ...
  ></tatami-canvas>
</div>

Allow File Drops on Canvas

By default Tatami has drop target on the canvas. You can drop standard image files and load them into Tatami. If you need to prevent this from happening simply add allow-drop-files prop.

<div id="app">
  <tatami-canvas
    ...
    allow-drop-files="false"
    ...
  ></tatami-canvas>
</div>

Location for WebAssembly Binaries

Location attribute allows you to specify where Emscripten is trying to load the compiled wasm binary and assets.

<div id="app">
  <tatami-canvas
    ...
    location="https://cdn.jsdelivr.net/npm/tatami-canvas/dist/tatami/"
    ...
  ></tatami-canvas>
</div>