Show HN: MirrorDraw – A small project to draw on a canvas

I think "Show HN" was the right decision. If it was "Ask HN" I would have not looked at it. It's also nice to see you made the source code available too. I haven't looked at the code yet, but it's good to know its out there.

I tested the app with an older version of chrome (24) and it worked well. Drawing and downloading was successful, although my supposed "artistic" skills are more than a bit embarrassing. I saw no errors when opening the downloaded file in gimp. I liked how you used a transparent background in the image --this violated the principle-of-least surprise due to the white background of the website, but at least for me it was a pleasant surprise.

Lastly, two possible suggested improvements, well three actually. (1) Allow background color to be set on resulting image (i.e. no surprises). (2) Enable sharing the image as a link of some sort, or via social media, or something like that. (3) Auto-detect viewport size and size the new image/canvas accordingly.

I'll take a shot at your line width question. When you are dragging across the canvas slowly, you get sent an event for every pixel the mouse touches, and your code is drawing a 20px wide line between each new point. If the pixel is down from the last pixel, it will draw a 1px by 20px horizontal line. If it's the to right it will draw a 1x20px vertical line, because it's just trying to connect the last point to the new point. If the next mouse event happens to be perfectly diagonal from the last, it will draw a 20px wide line that's diagonal. Since the mouse is moving pixel by pixel, if you drag it diagonally, it's path will basically randomly be one of these three movements, so you get a mixture of vertical, horizontal, and diagonal lines. Notice that if you move the mouse quickly enough, you don't get an event for every pixel along the path (since the resolution of the mouse's motion isn't high enough), and it will draw a clean 20px line between each detected point.

What I would do to handle this is when you are drawing fat lines, draw a 20px diameter filled circle at the beginning point, then the line to the ending point, then a 20px diameter circle at the end point. This will give you strokes with rounded ends. Another possible improvement along this lines is that you could paint a circle when someone first clicks on the canvas rather than only when they move the mouse.

No, it's not intentional. I have seen it but it is variable. On one computer it never happens and on another it happens like you said and on another it's always slow.

The way this works is that I add points to an array while dragging. There is a loop that adds a point and draws a line to the last point. I think that interval of drawing is what slows it down but that is just what I felt like it had to be.

You are right. I had tried but never got it working. The problem was knowing when to stop one canvas and start the next (which is done with mousedown/mouseup or bounds right now).

This and the kaleidoscope are two things that could keep me busy.