I know that this is beyond the scope of this short article, but one thing that is worth looking into for anyone wanting to build a drawing app like this is Bresenham's line algorithm.
Drawing lines with paths is OK as long as you are using a round brush (lineCap = "round"), but if you use a large square brush, you're going to see significant tearing when drawing an irregular line. Bresenham's algo lets you avoid that problem - it's a great and cheap way to approximate lines.
Just wanted to second on using a line algorithm. If you draw with the mouse quickly, you will also see that the event does not fire with every pixel, so you get gaps in the data points. A line algorithm solves that, and can perform better depending on the algorithm and number of data points. Also consider pointer events or detecting touch for mobile support.
Yes touch was indeed on the list still, but probably be a separate one, I like to keep the articles short so people will actually try them.
The line algorithm is a good one, I need to do some research on that.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
That's a really cool sample :)
I know that this is beyond the scope of this short article, but one thing that is worth looking into for anyone wanting to build a drawing app like this is Bresenham's line algorithm.
Drawing lines with paths is OK as long as you are using a round brush (
lineCap = "round"), but if you use a large square brush, you're going to see significant tearing when drawing an irregular line. Bresenham's algo lets you avoid that problem - it's a great and cheap way to approximate lines.Oh nice addition, good read!
Just wanted to second on using a line algorithm. If you draw with the mouse quickly, you will also see that the event does not fire with every pixel, so you get gaps in the data points. A line algorithm solves that, and can perform better depending on the algorithm and number of data points. Also consider pointer events or detecting touch for mobile support.
Yes touch was indeed on the list still, but probably be a separate one, I like to keep the articles short so people will actually try them.
The line algorithm is a good one, I need to do some research on that.