Skip to content


Repository files navigation

Draw Me A Kanji Build Status

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


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>
  var dmak = new Dmak('電車', {
    'element' : "draw"

or the jQuery plugin

<div id="draw"></div>
    // That's it!

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


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
  • - 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
  • - 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


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



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




Check Release list.


  • 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


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