# Which direction to take: SVG, Canvas, CreateJS, or?

**URL:** <https://forum.kirupa.com/t/which-direction-to-take-svg-canvas-createjs-or/639196>\
**Category:** programming\
**Created:** [December 30, 2018, 11:16pm UTC](https://forum.kirupa.com/t/which-direction-to-take-svg-canvas-createjs-or/639196 "2018-12-30T23:16:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Squinter](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Squinter](https://forum.kirupa.com/u/Squinter)\
**Post date:** [December 30, 2018, 11:16pm UTC](https://forum.kirupa.com/t/which-direction-to-take-svg-canvas-createjs-or/639196/1 "2018-12-30T23:16:29Z")

</div>

My intent is to make a game-like page where the user is shown polygons (and eventually ones with some curves on their sides). After a set time has passed, the polygon goes away and a neutral square appears with its corners controllable. The user then attempts to recreate the polygon by adjusting the corners. Once done, the user clicks a button and the original polygon overlays their attempt so they can see how close they were.

The question is, which technology is best for me to pursue? I think I can see ways to succeed for all of the ones mentioned in the topic’s title.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 31, 2018, 3:32am UTC](https://forum.kirupa.com/t/which-direction-to-take-svg-canvas-createjs-or/639196/2 "2018-12-31T03:32:46Z")

</div>

I am big fan of games like this. Great question on what you are trying to do. I would say SVG as my preferred solution followed by Canvas. They are all a bit tricky to do. Take a look at this: [http://interactjs.io/](http://interactjs.io/)

This library might make some of the resize logic easier to implement. I haven’t used it, so I can’t really vouch for how good it really is.

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![Squinter](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Squinter](https://forum.kirupa.com/u/Squinter)\
**Post date:** [December 31, 2018, 3:39pm UTC](https://forum.kirupa.com/t/which-direction-to-take-svg-canvas-createjs-or/639196/3 "2018-12-31T15:39:47Z")

</div>

Thanks Kirupa!  
What a brilliant solution. Now I have a direction.

---

<div class="post-metadata">

**Author:** ![Squinter](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Squinter](https://forum.kirupa.com/u/Squinter)\
**Post date:** [April 14, 2019, 10:10pm UTC](https://forum.kirupa.com/t/which-direction-to-take-svg-canvas-createjs-or/639196/4 "2019-04-14T22:10:13Z")

</div>

I tried interactjs but it was too complex (and large) for me at the moment. I ended up going with [plain draggable](https://anseki.github.io/plain-draggable/) instead. Ran into an issue though (detailed [here](http://forum.kirupa.com/t/svg-javascript-typeerror/639656)).