1# SketchCanvas
2A simple HTML5 figure editor and viewer
3
4
5## Objectives
6
7Create a simple figure format that can replace Microsoft Word figures in
8web documents.
9
10It aims to have following features:
11
12* Easily editable in-place by GUI.
13* Easily embeddable into Wiki pages, blogs and design documents.
14* Can be easily copy & pasted to another document.
15* Unlike SVG, no complex graphics features are supported
16* Has a text format that is easily examined and edited by human.
17* Can also be saved as a separate text file.
18* Can be easily compared with text-wise diff.
19* Has extensible format.
20
21
22## Current implementation
23
24Current implementation uses YAML as format.
25It enables easy inspection and editing by humans.
26
27It can be edited by a static HTML document with JavaScript.
28It's so easy to setup a server that accepts and shows uploaded figures.
29
30It's very easy to create a figure or a diagram like this one:
31
32![Screenshot](media/threads.png)
33
34
35![Screenshot](media/screenshot.png)
36
37The source looks like this:
38
39~~~ yaml
40- type: line
41  points: '485,569:233,536'
42- type: line
43  points: '605,546:478,421'
44- type: line
45  points: '382,147:264,303'
46  color: blue
47- type: line
48  points: '630,139:639,272'
49  color: green
50- type: line
51  points: '763,153:492,244'
52  color: green
53  width: 2
54- type: line
55  points: '720,142:435,209'
56  color: green
57  width: 3
58- type: arrow
59  points: '134,115:372,269'
60  color: green
61  width: 3
62- type: text
63  points: '583,343'
64  text: Normal Text
65- type: text
66  points: '583,369'
67  width: 2
68  text: Bold Text
69- type: text
70  points: '588,392'
71  width: 3
72  text: Extra Bold Text
73- type: text
74  points: '589,424'
75  color: red
76  width: 3
77  text: Red Extra Bold Text
78- type: arcarrow
79  points: '577,364:264,390:583,387'
80  color: green
81  width: 2
82- type: ellipse
83  points: '567,399:784,435'
84  color: blue
85  width: 2
86
87~~~
88
89## Server-side SketchCanvas renderer
90
91SketchCanvas documents can be rendered in the server if the server
92has a PHP running with GD extension.
93You have to download a file named "NotoSansCJKjp-Regular.otf" from
94the URL below and place it under "phplib" directory in the server
95in order to enable this feature.
96
97https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKJP-hinted.zip
98
99This feature can be used to embed sketches into a PDF in conjunction with
100DokuWiki's dw2pdf plugin.
101