Canvas feature

[bagia]

Description Give the ability to users to design small drawings/sketches directly in the editor, with a "paint-like" canvas. PoC: Video | Code

Minimum viable feature set

• [ ] Web view/source view switching and vice-versa
• [ ] Persistence (in the post)
• [ ] Giving the feature its own button in the toolbar

Required features

• [ ] Resize the canvas
• [ ] Own to add more tools
• [ ] Tools: undo/redo buttons

"Would like" features

• [ ] Tools: pencil
• [ ] Tools: color picker
• [ ] Tools: shapes (rectangle, circle)
• [ ] Tools: labels

_Validation_

• [ ] Consistent rendering on desktop and mobile platforms
• [ ] No conflicts between multiples canvases in same post

Note : this issue is open to comments and/or contributions

[bummytime]

ping @sendhil

[bummytime]

@bagia thanks for adding this issue. Please feel free to post any updates (no matter how rough) to this issue when you are looking for some feedback. Text is great, pictures and video are even better :-)

[bagia]

@bummytime I will. I'm still doing some research at the moment, especially around how to store the resulting images. At first I was thinking I could store them as inline (base64-encoded) images in the body of the HTML. But I see that even the smallest image is already generating a big bunch of base64 data (base64 is big by nature, that doesn't help). Now I'm more thinking about storing the resulting pictures on the device, and maybe upload them. This will need a more heavy-weight logic, but it is also increase the potential of the feature: you could take a photo from your camera roll, and then edit it with this feature: for instance circle things or draw on top of them... Let me know if you have any thought/comment to share with me on that.

[bummytime]

Now I'm more thinking about storing the resulting pictures on the device, and maybe upload them. This will need a more heavy-weight logic, but it is also increase the potential of the feature: you could take a photo from your camera roll, and then edit it with this feature: for instance circle things or draw on top of them...

I :heart: this approach! (and also agree that the inline images will make for a large post model which will probably cause unforeseen issues)

[bagia]

I haven't had much time to work on this lately, but I did put some hours today. I'm moving towards a feature where you tap an image, and this puts the image in a sort of "edit mode" where you can draw on top of it. I guess at some point I'll figure out a way to have a button to start "fresh" with a blank image. I'm now able to synchronize an image tag to a canvas and vice versa, including when switching the editor from edit mode to HTML mode. I still need to work on storage/persistence. At the moment I'm still using base64 but it clearly doesn't scale when using photos. I'm also starting to think about the controls I'm going to need (to switch to edit mode, to save, to switch tools, etc.). Not too sure of the direction I'll take there (either another toolbar on top of the main one, or maybe a floating control written in HTML/Js).

[bummytime]

Good stuff @bagia, post a video when you have something roughly working.