

Ask HN : Can this be done with HTML5 canvas? - init0

Trying to simulate http://www.mathsisfun.com/geometry/images/triangle-acute-obtuse.swf with canvas using kinetic, any other lib suites this? I'm aware that this can be done, but not finding an easy way out....
======
hardwaresofton
definitely super doable with canvas.

If I was to try and undertake this project, I would look into/befamilliar with
3 things:

-Canvas (I mean BASIC canvas, use a framework, even)

-KnockoutJS (for declarative binding and dom manipulation)

Here's how I would go about it:

1\. Get your webpage up and running (or use some IDE that will let you test)

2\. Make a relatively small canvas element, and draw a triangle in it (so
you'd have to set up the draw loop for the triangle I guess)

3\. Find out and familiarize yourself with how to get at the vertices and
actual points of the triangle

4\. Use knockoutJS (make them observables, and print them somewhere on the
page below the canvas as spans

5\. Add math, make computed observables that do the calculations you need
(sin/cos/etc)

6\. At this point, you want to focus now, on making those vertices draggable
(from here, you'll see just how easy/hard it is to make a dynamic one -- I
suspect it won't be too hard with a good framework that redraws for you, worst
comes to worst you could just redraw lines after detecting movement by
dragging on the vertices)

7\. At this point, all you need to work on is making it prettier -- look into
CSS3 for neat overlay and positioning tricks

It's super doable, maybe even easy (since the math is simple and the concept
is relatively simple)

~~~
init0
I had reached till 3. Thank for the amazing feedback, will try my best.

~~~
hardwaresofton
Oh didn't see this update, yeah man you're doing really well, I think it's
going good, you've already got the element, and the triangle, now you just
have to get it to update some dom element (or ideally, update some observable
that has a DOM element somewhere -- knockoutjs style) -- and do some
calculations!

Awesome progress, I said it seemed easy, but everything gets complicated once
you actually start doing it, good luck!

BTW, JSFiddle is pretty amazing. lemme know if you get stuck, send me a PM or
something and I'll help out!

