Dmak NPM | npm.io

Draw Me A Kanji

Render your Japanese writings with fun and taste

Draw Me A Kanji

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!

Prerequisite All the hard work with SVG is done by Raphaël, a cool and simple Javascript library to play with vector graphic on the Web. And... that's it! Include both raphael.js and dmak.js files in your HTML file.

Up to you to use either:

Vanilla JS

<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

Customization

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