April 16, 2017
Over the last week, I built a fun™ and cool™ web app to draw doodles and simple drawings. I appropriately named it Sketch.
You can check it out here: https://sketch.arjun.ninja
First, I noted down the functionality my app would provide. writing it down helped me focus and build a Minimum Viable Product.
I started by building whatever I had learned during the Canvas course. With little effort, I had a canvas to draw on and a function to listen to mouse events and translate them to ink on the canvas.
Here’s an initial UI mockup:
I then added a colour palette, a brush width selector, and a multi-colour brush. The multi-colour brush is my favorite.
I then added touch and multi-touch, with the help of MDN’s excellent guide to adding touch input to canvases. There was only one feature remaining in my list: Saving sketches as images.
For this, I used the canvas API’s
toDataURL() method to convert the canvas to a base64 encoded string of
image/png type, which I then set as the
href in my download link element.
<a href="#" download="drawing.png" onclick="saveImage()" class="action"> Download sketch </a>
download attribute triggers a save dialogue in the browser when the link is clicked.
Unfortunately, this hack was of no use in mobile browsers because apparently mobile browsers don’t automatically decode base64 strings.
I said screw it, ship it. And that’s how I got to my MVP, two days after I started from scratch. I launched the website on GitHub Pages and got good reviews from my cool friends.
This is v1:
Personal blog by Arjun Munji.
I like to learn and explain things.