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