Draw Me A Kanji

Render your Japanese writings with fun and taste

For the sake of simplicity, "Draw Me A Kanji" is shortened to dmak

Usage

Using dmak.js is easy, a lot easier than writing kanjis, trust me!

Prerequisite To simplify all the work with SVG, we use the cool JavaScript library Raphaël ➲ Download and no worries this is the ONLY dependency.

Once you are all set, include both raphael.js and dmak.js files in your HTML file.

Up to you to use either:

Pure JavaScript

<div id="draw"></div>
<script>
  var dmak = new Dmak('電車', {
    'element' : "draw"
  });
</script>

or the jQuery plugin

<div id="draw"></div>
<script>
    // That's it!
    $("#draw").dmak('電車');
</script>

NOTE: You need to include the additional jquery.dmak.js file

Options

Dmak.js comes with a whole set of options to alter the way it behaves. Here is an explicit list of all parameters available to you followed by their default value.

• uri - path to the SVG files folder. ""
• skipLoad - skip SVG files loading. false
• autoplay - start drawing as soon as all SVG files are loaded. true
• height - height in pixels of a single paper surface. 109
• width - width in pixels of a single paper surface. 109
• viewBox.x - x position of the canvas. 0
• viewBox.y - y position of the canvas. 0
• viewBox.w - width of the canvas. 109
• viewBox.h - height of the canvas. 109
• step - positive integer which defines the speed of the drawing. 0.03
• element - DOM element or its ID which is going to be a parent for drawing surface. "draw"
• stroke.animated - enable or disable stroke animation. true
• stroke.order.visible - display stroke order. false
• stroke.order.attr.font-size - stroke order font size in pixels. 8
• stroke.order.attr.fill - stroke order color. #999999
• stroke.attr.active - currently drawn stroke color. "#BF0000"
• stroke.attr.stroke - stroke color (can use "random" keyword here for random color). "#2C2C2C"
• stroke.attr.stroke-width - stroke width in pixels. 4
• stroke.attr.stroke-linecap - ["butt", "square", "round"]. "round
• stroke.attr.stroke-linejoin - ["bevel", "round", "miter"]. "round
• grid.show - show or hide gridlines. true
• grid.attr.stroke - grid color. "#CCCCCC"
• grid.attr.stroke-width - grid width in pixels. 0.5
• grid.attr.stroke-dasharray - ["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]. "--"
• loaded - callback function which is executed when all SVG files are fully loaded
• erased - callback function which is executed when a stroke is erased
• drew - callback function which is executed when a stroke is drawn

Demo

For basic samples please refer to demo folder, otherwise dive into drawmeakanji.com source code.

Compatibility

• Chrome 1.0+
• Firefox 16.0+ (see: bugzilla.mozilla.org/show_bug.cgi?id=902879)
• Opera 17.0+
• Safari 3.0+
• IE 10.0+ (animation not supported)

Inspirations

• From @jakearchibald and his great article on Animated line drawing in SVG
• From @akeru and his kanjiviewer.js library.

And of course a huge thanks and support to KanjiVG for providing a whole set of SVG files.

Contributing

Check CONTRIBUTING.md

History

Check Release list.

Building

• Install nodejs
• Install grunt-cli
• Process dependencies by running npm install in the repository root folder
• Build a new release by invoking grunt in the repository root folder

License

Draw Me A Kanji (dmak.js) was created by Matthieu Bilbille and released under the MIT License.