

Show HN: MirrorDraw – A small project to draw on a canvas - hfsktr
http://mirrordraw.herokuapp.com/

======
hfsktr
I wasn't sure if this would have been better as an Ask HN.

This was a small project to learn to use canvas and Ruby on Rails better. It
isn't an ongoing project but I would like to keep learning and get feedback on
what I can improve on. Especially where I am doing something wrong in the
javascript or completely against how I should be using RoR.

Source:
[https://github.com/Rhebel/MirrorDrawing](https://github.com/Rhebel/MirrorDrawing)

edit: I have a huge question for anybody who knows a solution. I don't know
how to search for this properly. In the console you can adjust the line width
manually; MD.PX = 20

Draw something after doing that and things are strange. I _think_ it's because
the line doesn't know which direction it should go between points so it seems
to be pretty random. I had an idea that adding points would help but I don't
know and I'd love to figure that out.

~~~
bjterry
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.

------
sgehlich
The first few lines are drawn really slowly over here... after a couple of
lines, they appear instantly. Weird behavior, is this intended?

~~~
hfsktr
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.

------
nikital
It's a fun toy to play with!

One thing I would improve: When drawing on the left half and moving to the
right half without releasing the mouse, the drawing stops. I would expect the
drawing to continue on the right canvas, while mirroring back to the left
canvas, and vice-versa.

Maybe it's a browser specific, I'm on Chrome 38.0.2125.122, OSX 10.10.

~~~
hfsktr
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.

~~~
nikital
Is there a reason to use two separate canvases? You won't have this problem if
you had just one canvas.

~~~
hfsktr
When I started it was set up so that only the left canvas worked. I spent some
time to make it work for both.

I could make it so that when drawing it reverses from the middle so that it
was just one canvas. Well, I could try.

------
billconan
I think you can make it like Kaleidoscope

------
Immortalin
Writing chinese characters on it is an interesting experience...

