Pikaso
Seamless, headless and fully tested HTML5 Canvas library
Install / Use
/learn @pikasojs/PikasoREADME
<a href="https://pikaso.app">Website</a> · <a href="https://pikaso.app/api/classes/Pikaso.html">API Documentation</a> · <a href="https://github.com/pikasojs/pikaso/issues">Issues</a> . <a href="https://github.com/pikasojs/pikaso/discussions">Discussion</a>
<br /> <br />
<br />
<br />
Install
NPM
Pikaso provides both ES module and CommonJS bundles, which is easy to use with the popular bundlers
npm install pikaso --save
Yarn
yarn add pikaso
<script> tag
Pikaso also supports UMD loading
<srcipt src="https://cdn.jsdelivr.net/npm/pikaso@latest/umd/pikaso.min.js" type="text/javascript" />
Getting Started
import Pikaso from 'pikaso'
const editor = new Pikaso({
container: document.getElementById('<YOUR_DIV_ID>'),
})
React
This is possible to directly import the library or reuse the official hook
https://github.com/pikasojs/pikaso-react-hook
NodeJs
Pikaso comes with support for NodeJs out of the box.
Using Pikaso in a NodeJs environment is similar to using it in a browser.
https://pikaso.app/#/advanced/nodejs
Features
- Fully Typed
- Global Configurations
- Fully Customizable Cropping
- Rotation and Transformation
- Shape and FreeStyle Drawing
- Built-in Shapes
- Groups
- Interactive Text Editing
- Customizable Shapes
- Image and SVG
- Background Image
- Event Management
- State Management (Undo/Redo)
- Flipping
- Interactive Selection Management
- Snap to Grid
- Measurement Tag
- Export to PNG and JPEG
- Import/Export JSON
- Filters
- Custom Filters
- NodeJs
Documentation
API references
Demos
React Setup
Vue 3 Setup
Svelte Setup
All Demos
Pikaso vs. Konva
Konva is a great HTML5 Canvas TypeScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Pikaso is built on top of Konva to provide a couple of advanced features that Konva doesn't support out of the box.
| Library | | | - | - | | HTML5 Canvas | Provides low level APIs to draw graphics | | Konva | Provides Shapes, Dragging, Styling, Events, Transformation and Filters features to HTML5 canvas | | Pikaso | Adds a lot of Simplicity and provides Free style and Shape Drawing, Advanced Shapes and Groups, State Management (Undo/Redo/Reset), JSON Import/Export, Text Editing, Cropping, Rotation, Transformation, Event Manager, Snap to Grid, Advanced Transformation and Selection, Flipping, Background Image and Background Overlay management, Filter Management to Konva |
Supporters
License
According to the terms of the MIT license, Pikaso is freely distributable.
