chore: larger chars and canvas renderer

src/components/theme.ts

+const nightMode = document.getElementsByClassName('nightMode').length > 0
+
+export const colorBg = nightMode ? '#909090' : '#999999'
+export const colorFg = nightMode ? '#FFFFFF' : '#222222'
+export const colorHighlight = '#339966'
+
+/** Side length of character SVGs. */
+export const hanziSize = 100

src/components/write/colors.ts

-const nightMode = document.getElementsByClassName('nightMode').length > 0
-
-export const colorBg = nightMode ? '#909090' : '#999999'
-export const colorFg = nightMode ? '#FFFFFF' : '#222222'
-export const colorHighlight = '#339966'

src/components/write/strokes.ts

 import HanziWriter from 'hanzi-writer'
-import { colorFg } from './colors'
 import { GetHanziDataKind, getHanziData } from '../hanzi-data'
 import { lookup } from '../hanzi-data/lut'
+import { colorFg, hanziSize } from '../theme'
 
 export interface Strokes {
   /**
@@ -24,7 +24,6 @@ export interface StrokesOpts {
    */
   character: string
 }
-const strokeSize: number = 75
 
 /**
  * Returns a container for the strokes of a given character. The container
@@ -86,13 +85,13 @@ function strokeRangeSvg (strokes: string[], untilIdxExcl: number): SVGElement {
     'http://www.w3.org/2000/svg', 'svg'
   )
   svg.classList.add('stroke-image')
-  svg.style.width = `${strokeSize}px`
-  svg.style.height = `${strokeSize}px`
+  svg.style.width = `${hanziSize}px`
+  svg.style.height = `${hanziSize}px`
   const group = document.createElementNS(
     'http://www.w3.org/2000/svg', 'g'
   )
   const { transform } = HanziWriter.getScalingTransform(
-    strokeSize, strokeSize
+    hanziSize, hanziSize
   )
   group.setAttributeNS(null, 'transform', transform)
   svg.appendChild(group)

src/components/write/write.ts

 import HanziWriter, { type HanziWriterOptions } from 'hanzi-writer'
 import { type Strokes, createStrokes } from './strokes'
-import { colorBg, colorFg, colorHighlight } from './colors'
+import { colorBg, colorFg, colorHighlight, hanziSize } from '../theme'
 import { GetHanziDataKind, getHanziData } from '../hanzi-data'
 
 const globalId = 'strichfolge-animation'
-/** Side length of animated character SVGs. */
-const size = 75
 
 export interface WriterOpts {
   /**
@@ -119,12 +117,13 @@ async function initWrite (
         ? 0.5
         : 1.75
       const hanziWriterOpts: Partial<HanziWriterOptions> = {
-        width: size,
-        height: size,
+        width: hanziSize,
+        height: hanziSize,
         padding: 0,
         strokeColor: colorFg,
         outlineColor: colorBg,
-        strokeAnimationSpeed: speed
+        strokeAnimationSpeed: speed,
+        renderer: 'canvas'
       }
       if (opts.highlightRadical === true) {
         hanziWriterOpts.radicalColor = colorHighlight