Pikaso

Pikaso

Seamless, Fully-typed and Fully-tested HTML5 Canvas Library

Learn more »

Website · API Documentation · Issues . Discussion

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
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

Full Documentation

API references

Full 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.

Supporters

License

According to the terms of the MIT license, Pikaso is freely distributable.