SketchCanvas

A simple HTML5 figure editor and viewer

Objectives

Create a simple figure format that can replace Microsoft Word figures in web documents.

It aims to have following features:

• Easily editable in-place by GUI.
• Easily embeddable into Wiki pages, blogs and design documents.
• Can be easily copy & pasted to another document.
• Unlike SVG, no complex graphics features are supported
• Has a text format that is easily examined and edited by human.
• Can also be saved as a separate text file.
• Can be easily compared with text-wise diff.
• Has extensible format.

DokuWiki plugin

The SketchCanvas figure is a file format and a JS library to render/edit. However, this project also implements a DokuWiki plugin that you can embed this document into a wiki text, and it is the most common way to use it.

See the plugin page for more.

Current implementation

Current implementation uses YAML as format. It enables easy inspection and editing by humans.

It can be edited by a static HTML document with JavaScript. It's so easy to setup a server that accepts and shows uploaded figures.

It's very easy to create a figure or a diagram like this one:

The source looks like this:

- type: line
  points: '485,569:233,536'
- type: line
  points: '605,546:478,421'
- type: line
  points: '382,147:264,303'
  color: blue
- type: line
  points: '630,139:639,272'
  color: green
- type: line
  points: '763,153:492,244'
  color: green
  width: 2
- type: line
  points: '720,142:435,209'
  color: green
  width: 3
- type: arrow
  points: '134,115:372,269'
  color: green
  width: 3
- type: text
  points: '583,343'
  text: Normal Text
- type: text
  points: '583,369'
  width: 2
  text: Bold Text
- type: text
  points: '588,392'
  width: 3
  text: Extra Bold Text
- type: text
  points: '589,424'
  color: red
  width: 3
  text: Red Extra Bold Text
- type: arcarrow
  points: '577,364:264,390:583,387'
  color: green
  width: 2
- type: ellipse
  points: '567,399:784,435'
  color: blue
  width: 2

Server-side SketchCanvas renderer

SketchCanvas documents can be rendered in the server if the server has a PHP running with GD extension. You have to download a file named "NotoSansCJKjp-Regular.otf" from the URL below and place it under "phplib" directory in the server in order to enable this feature.

https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKJP-hinted.zip

This feature can be used to embed sketches into a PDF in conjunction with DokuWiki's dw2pdf plugin.

How to build

As a PHP application, it does not need build the server side, but the frontend needs to bundle.

Prerequisite:

• deno

Run the following command to build the bundled script.

deno run --allow-read --allow-write --allow-net=deno.land,registry.npmjs.org --allow-env --allow-run --unstable bundle.ts

This will produce a directory and a source file bundle/SketchCanvas.js and its source map file bundle/SketchCanvas.js.map.

Make the zip file to install as a package (please run it on a Unix like shell):

./makezip.sh

sketchcanvas.zip will be produced in the directory. This file can be installed from manual install or be linked from plugin page.