Skip to content

🖌️ Drawing area widget for Anki to practice Kanji writing

License

Notifications You must be signed in to change notification settings

pigoz/anki-canvas

Repository files navigation

anki-canvas

This is a touch based canvas for drawing shapes in AnkiDroid and Desktop Anki.

Compared to AnkiDroid's own native whiteboard which is designed to take notes, this is meant for use cases where the the user has to draw a shape as the answer to a card (for example: Kanji/Hanzi drawing practice, Remembering the Kanji, etc).

How to install

1. Anki plugins

You will need to install the following Anki plugins. From Anki go to Tools > Add-ons > Get Add-ons... Then insert the plugin's code.

2. Example deck

Download the premade Anki deck from the Releases page and import it into Anki (double clicking the deck should work).

Screenshots

Options

You can easily customize some variables picked up by AnkiCanvas. Open the card layout and edit the AnkiCanvasOptions JavaScript object in the Front and Back templates.

The current default options object is the following:

<script>
window.AnkiCanvasOptions = {
  frontCanvasSize: 300,
  frontLineWidth: 7,
  backCanvasSize: 150,
  backLineWidth: 3.5,

  // 'auto' is a special value that will automatically select either 'light' or
  // 'dark' depending on Anki's "Night Mode" status. If you wish to force a
  // colorScheme, you can pass it's name from the colorSchemes settings below.
  colorScheme: 'auto',

  // You can modify the default colorSchemes in the dictionary below, or even
  // add your own colorSchemes beyond light and dark.
  colorSchemes: {
    light: {
      brush: '#000',
      grid: '#dcdcdc',
      gridBg: '#fff',
      buttonIcon: '#464646',
      buttonBg: '#dcdcdc',
      frontBrushColorizer: 'none', // none | spectrum | contrast
      backBrushColorizer: 'spectrum',
    },
    dark: {
      brush: '#fff',
      grid: '#646464',
      gridBg: '#000',
      buttonIcon: '#000',
      buttonBg: '#646464',
      frontBrushColorizer: 'none',
      backBrushColorizer: 'spectrum',
    },
  },
}
</script>