excalidraw-tutorial

A tutorial on how to build a drawing app, inspired by Excalidraw

Useful links:

Part 1:

Youtube Tutorial: https://youtu.be/6arkndScw7A

Excalidraw: https://excalidraw.com/

Roughjs: https://roughjs.com/

HTML Canvas (MDN): https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Part 2 (Moving Elements):

Youtube Tutorial (Moving Elements): https://youtu.be/IcfhcJrtJqI

Check if a point is on a line: https://stackoverflow.com/a/17693146/5041141

Part 3 (Resizing Elements):

Youtube Tutorial (Resizing Elements): https://youtu.be/MUrlzF2L_Rc

Part 4 (Undo Redo):

Youtube Tutorial (Undo Redo): https://youtu.be/KHdNJb54_pQ

Part 5 (Pencil Tool):

Youtube Tutorial (Pencil Tool): https://youtu.be/Fx3yt3zKdyk

Perfect-Freehand: https://github.com/steveruizok/perfect-freehand

Part 6 (Text Tool):

Youtube Tutorial (Text Tool): https://youtu.be/W05mJF1DnWg

MDN Docs Text: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

MDN Docs Measure Text: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText