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

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

Play this article

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