MOTIVATION

Konva.js (hereinafter – Konva) gives you ability to hook into native "CanvasAPI" context (CanvasRenderingContext2D) via Konva.Shape exposed sceneFunc, but also enjoy Konva-specific functionality such as draggable shape (enabled at Layer level).

---

Installation

1. Clone the project to your local machine;
2. npm ci # it assumes you have Node.js as well as npm installed prior to using this command.

Dependencies

• Konva.js | [REQUIRED]
• Vite.js | [REQUIRED]
• typed-getters | [OPTIONAL]

Conventions

To reproduce token used as Letter modifier class (Lm Unicode) for valid a ECMAScript (JavaScript) indentifier found in this codebase, you can follow-up one of the respective methods as follows:

A. Leverage Regex in JavaScript:

    // # alternatively just use dollar '$' token
    RegExp('\u{3035}').source // '〵'

B. Set global snippet in VSC (recommended):

Snippets

DEV_TIP # you can make your own aliases in prefix[], use your imagination what works best for you !

{
    "Letter modifier (Lm U+3035) := vertical kana lower half": {
        "scope": "javascript,typescript",
        "prefix": ["lm:lower-kana", "u3035", "downkana"]
        "body": [
            "〵$0"
        ],
        "description": "JavaScript-friendly backward-slash"
    }
}

---

Playground

In order to drag a shape drew within Konva.Shape we have to create a Konva.Rect instance and plug it onto CanvasRenderingContext2D's ctx accessible via Konva.Shape's exposed sceneFunc;

Interactions

npx vite serve --open

Click on black-coloured border (frame) of circle and drag around, it will change a color whilst dragging, but gets back to its defaults then dragging is done;

---

Feel free to accommodate the codebase to your needs, just clone the boilerplate and enjoy coding with Konva.js ! ♥

Cheers