Introduction
Welcome to Tatami Canvas documentation
Welcome to Tatami Canvas! Tatami is easy-to-use graphics engine powered by WebAssembly. It provides great drawing capabilities, layers, text, basic vector objects and some cool effects. We're want to provide smooth onboarding with these docs and help you get familiar with Tatami.
Is this open source?
Yes and no. The actual graphics engine, which was written in C++, is offered only as compiled binary. However the JavaScript side is open source.
Contribute:
Interested in helping us improve? Check out our GitHub repository to get started! From feature suggestions to bug fixes, all contributions are welcome.
Key Features
| Feature | Description |
|---|---|
| Drawing engine | Single color, multi-color and texture brushes with dynamic options. The engine is designed to be fast and efficient. |
| Input Devices | Tatami supports mouse, touch and pen events with pressure sensitivity. Zoom, pan or rotate canvas with multi-touch or mousewheel as you would expect. |
| Layers and Blending Modes | Create image compositions with layers, blending modes and layer masks. Layers can be reordered, hidden, locked, and have their opacity adjusted. |
| Text Layers and Vector shapes | Add text layers with custom TrueType fonts and shadow effect. Create vector rectangles, circles, polygons, stars and gingerbread shapes. |
| Color Adjustments | Adjust colors on layers, such as brightness, saturation, exposure, color balance, vibrance, hue, temperature, tint |
| Lenses and Filters | Apply non-destructive LUT filters, lenses, vignette. |
| Gradient Fill | Create gradient fills from custom color arrays with 9 different gradient types. |
| Drawing Assistants | Symmetry, Perspective, Gravity and Spinner assistants are stand-out features adding a new dimension to drawing experience. |
| Coloring Mode | Convert black and white images into coloring templates. Segments are automatically created and can be filled with colors by tapping on segment of drawing into them. |
| 3D Mode (coming!) | Paint directly over 3D model. Rotate, pan and zoom the model and paint over it. |
Technology & Libraries
Tatami leverages cutting-edge technologies to ensure performance and flexibility:
- Emscripten - WebAssembly compiler.
- Open GL ES 3.0 - 2D and 3D graphics rendering.
- JavaScript Layer - Web Component, Commands and API.