⚙️ Memo draw engine ⚙️

Drawing engine for MemoDraw

State of the art

Before juping into the development of the drawing engine, we asked ourselves what technologies were used for similar needs.

	Network traffic	Latency	Fluidity	Ease of implementation
Demo socket io	🔴	🟢	🟢	🟢
Gartic phone	🟢	🟠	🔴	🟠
Awwap	🟠	🟠	🔴	🟠
Figma	🔴	🟢	🟠	🔴
Skribbl	🟠	🟠	🟢	🟠

The network traffic was calculated with the network analyzer of firefox by repeating the same drawing (thanks to https://github.com/eguller/MouseRecorder) on each site.

Demo socket io

• Drawing : Classic canvas
• Event : Emited on MouseDown && (MouseUp || MouseMove)
• Network traffic (Smile draw - 10s) : 433 messages - 50.77 KB
• WS message format : Line with 4 points (x1; y1; x2; y2) + color - for each line

Gartic phone

• Drawing : Triple canvas (draw, pointer, logo)
• Event : Emited on MouseUp
• Network traffic (Smile draw - 10s) : 6 messages - 8 KB
• WS message format : List of point (x, y), first point contain color - for each section

Awwap

• Drawing : Triple canvas (draw, pointer, logo)
• Event : Emited on MouseUp
• Network traffic (Smile draw - 10s) : 120 messages - 20 kb
• WS message format : List of point (x, y), color, size, opacity, uid, type + ack ? - for each section

Figma (FigJam)

• Drawing : Canvas with GPU optimization (WebGL ?)
• Event : Emited on MouseDown && (MouseUp || MouseMove) - use of delay ?
• Network traffic (Smile draw - 10s) : 900 messages - 2 MB
• WS message format : encrypted

Skribbl

• Drawing : Classic canvas
• Event : Emited on MouseDown && MouseMove - use of delay ?
• Network traffic (Smile draw - 10s) : 185 messages - 30 kb
• WS message format : Type, id, List of point ( 2 coord (x1; y1; x2; y2) + angle ? - (variable number of point - number a point during a certain delay ?)