# Enhancing the experience of Writing over Canvas/whiteboard in Live Classes: Unacademy

I interned at **Unacademy** back in 2019 where I got to work on Enhancing the experience for Educators who write over Canvas/Whiteboard.

### The Problems

- Lot of
**Aliasing**is there, the**curves**and**strokes**are not smooth - It doesn’t mimic the
**strokes width**which happens while we are actually writing i.e. width of strokes should be t**hin when we write fast**and**thick when writing slow**

**How solving these problems are going to help users?**

- Makes the
**Writing**over virtual Canvas**easier**, as it gives the**real writing experience** - Makes
**handwriting**more**understandable**

### The How?

**Smoothening**

I used Savitzky–Golay filter which uses least squares to regress a small window of the data onto a polynomial, then uses the polynomial to estimate the point in the center of the window. Finally the window is shifted forward by one data point and the process repeats. This continues until every point has been optimally adjusted relative to its neighbours. I defined the number of iterations and in each iteration tried to find the best curve and keep the

error below the given Maximum Error. It learns from the current points and accordingly changes the alignment of previous points to find the best curve.

Parameters that decides the smoothness are:

• Squared error between points and fitted curve

**Speed dependent variable width**

Variable width is achieved by drawing perpendiculars to a line, length of the perpendicular is calculated according to the speed with which mouse is moving, ends of two adjacent perpendicular lines are joined to form a quadrilateral and then it’s filled.

Parameters that decides the width of stroke are:

• Distance between two consecutive points( Directly proportional to speed)

• Canvas Width and height

• Speed Dependence exponent

### Results

Here are side by side comparisons of the lectures with pen option with and without the features of smoothing and real looking strokes

Before vs After

Before vs After

**Tech Stack** : The entire code was written in React Framework