lia-canvas-ocr for LiaScript: Handwriting Recognition in Math Quizzes

Typing LaTeX in a text field is a high barrier for students who just want to write x²+3x-1 with a stylus. The lia-canvas-ocr community plugin by MINT-the-GAP solves this by adding a drawing canvas to any LiaScript answer field. Students draw their math answer on the canvas, select it with a rectangle, click “Submit as Solution” — and the handwriting is recognized by a local LaTeX OCR model and inserted into the quiz field automatically. No data leaves the browser.

Quick Start

<!--
import: https://raw.githubusercontent.com/MINT-the-GAP/lia-canvas-ocr/main/README.md
-->

# Addition Quiz

$a)\;\;$ $10 + 5 =$ [[ 15 ]]

@canvas

$b)\;\;$ $50 + 30 =$ [[ 80 ]]

@canvas

Place @canvas directly below any answer field. A small pen icon appears next to the field; clicking it opens the drawing canvas.

How It Works

1. Click the pen icon next to a quiz answer field
2. Draw your answer on the canvas with a finger, stylus, or mouse
3. Use the Submit as Solution tool to draw a rectangle around your answer
4. The OCR engine recognizes the handwriting and inserts LaTeX into the input field

The recognized LaTeX is shown with a compact preview below the field. The preview hides while the field is focused for editing.

Canvas Tools

The canvas supports touch and stylus input with pinch-to-zoom and pan. It can be resized by dragging the corners. Background and all drawings persist across page reloads via localStorage.

The OCR Engine

The OCR is powered by the Xenova/texify2 model running entirely in the browser via Transformers.js and ONNX Runtime WebAssembly. No data is sent to any server. The model (~900 MB) is downloaded once and cached by the browser; it loads lazily, only when the student first clicks “Submit as Solution”.

Example: Fraction and Equation Quiz

<!--
import: https://raw.githubusercontent.com/MINT-the-GAP/lia-canvas-ocr/main/README.md
-->

# Math Worksheet

**Task 1 — Addition**

$12 + 7 =$ [[ 19 ]]

@canvas

---

**Task 2 — Fractions**

Simplify: $\frac{6}{9} =$ [[ \frac{2}{3} ]]

@canvas

---

**Task 3 — Algebra**

Solve for $x$: $2x + 4 = 10$, so $x =$ [[ 3 ]]

@canvas

Students can type answers in the standard input fields, or switch to the canvas for handwriting at any point. Both input methods work side by side.

Try it live — draw your answers on the canvas and click “Submit as Solution” to see OCR in action:

Full Template Demo

Use Cases

Primary and secondary math — Students accustomed to writing answers on paper can continue with a stylus on a tablet, lowering the digital barrier while still using LiaScript’s auto-grading.

Fraction and algebra quizzes — The OCR model handles complex LaTeX expressions including fractions, exponents, square roots, and operators with high accuracy.

Accessible assessment — Students who struggle with keyboard input (dyslexia, motor difficulties) can write their answers in their natural style.

Combined with lia-annotation — Import both plugins so the teacher can annotate slides while students use the canvas for their answers.

Technical Facts

Try It

Related Templates

• lia-annotation — freehand drawing overlay for lecture slides
• lia-coordinate — drag-and-drop point placement on coordinate systems
• lia-Mathe — interactive fraction quizzes with circle and rectangle visualizations
• lia-orthography — text correction and dictation exercises