Javascript Drawing Tool using SVG or Canvas

  • Status: Closed
  • Prize: $231
  • Entries Received: 8
  • Winner: scrufDev

Contest Brief

I need a drawing tool for drawing and editing the following shapes:
Rectangles, L-shapes, and U-shapes.
PLEASE SEE THE ATTACHED IMAGES FOR BETTER IDEA OF THE SHAPES I'M EXPECTING

***************************
PLEASE READ ALL THE INSTRUCTIONS VERY CAREFULLY BEFORE SPENDING TIME.
IF SOMETHING IS NOT CLEAR: DON'T GUESS, JUST ASK
THIS PROJECT IS NOT FOR BEGINNER
**************

Please see the attached video for the reference. It does not have to be exact, however here are the main requirements for the functionality:
1. Must be supported by latest browsers.
2. The tool must function with both mouse on the desktop and on touch on mobile devices.
3. The drawing turns should be snapped to 45 and 90 degrees.
4. You must be able to save and load drawn shapes to the Javascript Object (No server-side needed at this point)
5. While you draw or resize, the dimensions labels should change their values.
6. When you click on the size label, you should be able to enter the value manually.
7. There should be the ability to rotate the shapes after they are drawn.
8. The user must be able to draw more than one shape.
9. No heavy libraries. (jQuery an/or additional libraries up to 200-300kb is fine). Before considering any additional libraries, please check with me.
10. Keep in mind that this tool will need to be extended later. I would need to add a few different options for each side of the shape(s) as well as their corners. For example: Change color of the side or set a different radius of each corner individually (Different colors or corners on one shape)

There is a good potential for the winning contestant to continue working on this project for additional compensation.

A few libraries to consider:
Konva.js https://konvajs.github.io/
Interact.js http://interactjs.io/
I have included some very early stage prototypes with them.

AGAIN, IF YOU ARE NOT SURE ABOUT SOME SIDES OF THE PROJECT, PLEASE CONTACT ME BEFORE YOU EVEN START. DON'T WASTE YOUR TIME!

*******UPDATE*********
Just a bit of clarification on the external libraries:
I'm fine with using libraries under 300k or so.
Here are some libraries that I considered and think they are suitable for this project:
KonvaJS https://konvajs.github.io/ ( think this very capable and easy to use)
Interact JS http://interactjs.io/ (Using this library with vanilla Javascript using SVG drawing is very possible. In the attached example you will see the proof of that. Its is also easy to set/get/edit data for each SVG part as a polygon, line, rectangle, etc)
PaperJS http://paperjs.org/
FabricJS http://fabricjs.com/
Pixie JS http://www.pixijs.com/
MXGRAPH JS https://github.com/jgraph/mxgraph example: https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html
This one is overkill for this project and it is quite heavy, but I would consider it still.
I'm open to other suggestions.

Recommended Skills

Winner
Featured Contest
Post a Contest Like This

Employer Feedback

“Very professional and knowledgeable. Great communications. Highly recommend!”

Profile image ashevillemnt, United States.

Top entries from this contest

View More Entries

Public Clarification Board

  • ashevillemnt
    Contest Holder
    • 5 years ago

    I have decided to extend the contest for another 3 days.
    There are not so many entries but some of them are very promising.
    Hopefully, this extension would be helpful.
    Please keep in mind that this contest is guaranteed, so one of you will definitely be awarded.

    Thank you, everyone and happy coding!

    • 5 years ago
    1. tassaduqvw
      tassaduqvw
      • 5 years ago

      Is the contest still up I can do more work if we have time.

      • 5 years ago
  • tassaduqvw
    tassaduqvw
    • 5 years ago

    Please check my second Entry #10 for this contest

    • 5 years ago
  • scrufDev
    scrufDev
    • 5 years ago

    Hello,
    thank you for extending the deadline.
    Just letting you know that I'm working on it and will try to post a demo tomorrow or the day after. Doing it in Konva.js.

    Best,
    Bartek

    • 5 years ago
  • mrscynthiabuck
    mrscynthiabuck
    • 5 years ago

    I started working on my solution again when I saw that the contest was extended. I still haven’t finished it and cannot work on it during the holidays though. If the contest is extended again for a few more days I will probably be able to complete it. #extended

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      Synthia, please submit whatever you have done so far before the end of contest.
      I will give another week before I award someone. This way you will be able to finish your entry and send me the link after the end of contest.
      Thanks

      • 5 years ago
  • carlosr4
    carlosr4
    • 5 years ago

    #extended

    • 5 years ago
  • tassaduqvw
    tassaduqvw
    • 5 years ago

    Hi I want to use Zim JS for this it is perfect for this app. but only draw back is it is 450 kb It has option to only enable the code that we are using so I can reduce the size let me know if that is ok? Zim plus Create JS both

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      This is the first time I ever heard of Zim JS.
      If you think it can handle this task very well, I would say go for it.
      Please keep in mind that it has to work on mobile devices as well.
      Thanks

      • 5 years ago
    2. tassaduqvw
      tassaduqvw
      • 5 years ago

      yes it will work on mobile too I will start uploading today

      • 5 years ago
  • deathWasp271
    deathWasp271
    • 5 years ago

    Hi,
    I just saw your contest, and I had a few questions.
    1) You only want support in the browser, right? Even on mobile device?
    2) Can you specifiy what you mean by "labels"? Do you want them attached to edges, corners or the shape itself?

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      Thanks for your question!
      Yes, mobile devices such as phones and tablets must work on this application.
      Please refer to the images I just uploaded for the idea of how labels should look.

      • 5 years ago
  • ScottContina
    ScottContina
    • 5 years ago

    I have a question:
    When you say U-shapes, do you mean arcs?

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      Thanks for your question!
      Please refer to the images I just uploaded.

      • 5 years ago
  • ScottContina
    ScottContina
    • 5 years ago

    This looks like something I did before. I am in.

    • 5 years ago
  • Grisha97924
    Grisha97924
    • 5 years ago

    Yes, I am very interested in this contest.
    I am talent Javascript library expert and I like best canvas library.
    This is my skill as well as hobby. :) :D
    Thanks.

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      Thanks!
      Looking forward to seeing your entry!

      • 5 years ago
  • ckind
    ckind
    • 5 years ago

    Hi there, have you ever used draw.svg.js? I recently built a very similar drawing application with draw.svg.js that I would be happy to show you a demo of.

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      I've seen this library but haven't used it or looked closely.
      I would love o see a demo.
      Thanks

      • 5 years ago
  • Grisha97924
    Grisha97924
    • 5 years ago

    Sorry, I can't find konva work.
    It is project for umbrella , seat, toilet, cafe and playground placement in seaside.
    I have solved snap function similar to photoshop.
    also I found collision disadvantage of konvaJS, so counted and used corner point collision without using interaction of konva.
    Thanks.

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      Thanks!
      I haven't looked at the Fabric.js library before, just saw a few basic examples.
      I just looked at some other code examples and I may have to agree with you that it may be a better tool for this purpose. It is more mature also.
      Are you interested in participating in this contest?

      • 5 years ago
  • webdevangel
    webdevangel
    • 5 years ago

    did you see my prev work ?

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      Yes, It looks like you are very capable.
      I think you have a great potential to win this contest!

      • 5 years ago
  • webdevangel
    webdevangel
    • 5 years ago

    I have many experience in KonvaJS, createJS, FabricJS, PaperJS.....

    • 5 years ago
  • Grisha97924
    Grisha97924
    • 5 years ago

    Thanks fir your reply.
    I think It is enough to use FabricJS only for function what you need.
    I have worked in spa design project by using KonvaJS.
    But Fabric is more powerful and possible customizing.
    FabricJS is TOP. :):D
    Thanks.

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      In all the examples I've seen with Fabric, the transformation of the shapes is very basic, it only allows to scale the shape proportionally. This is not what I'm looking for. I assume it is possible to do the custom shapes with custom resizing, right?
      Is it possible to see that spa design project you've done with KonvaJS?

      • 5 years ago
  • quinstonpimenta
    quinstonpimenta
    • 5 years ago

    Hello, I spent some time solving this problem as I found it very interesting. I have linked what I cooked up below. I'll try to finish the whole thing if you think the progress is apt. Let me know your thoughts: http://quinston-drawing-tool.s3-website-us-west-2.amazonaws.com/

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      Thank you so much!!! Looks VERY PROMISING!
      I would love for you to continue.

      • 5 years ago
  • Grisha97924
    Grisha97924
    • 5 years ago

    Hello
    I think there is simple solution for L shape and U shape
    First draw rectangle with fixed thick by drag and drop.(remember x0, y0, x1, y1)
    Second for drag event, remove above rectangle, redraw polygon.
    I have experience with similar work.
    Regards

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      Thank you for your comment!
      I think that may work. Are you thinking about using FabricJS or some different library?

      • 5 years ago
  • Grisha97924
    Grisha97924
    • 5 years ago

    I attached fabricJS work capture.
    https://drive.google.com/file/d/1JdaJTQ20TTsrSXdbucqsSWL5RK7lYvGZ/view?usp=sharing
    In this project implemented customizing rotate anchor(limited in line)
    I think It is possible and easy to draw U shape and L shape, Only needed some time.
    Thanks.

    • 5 years ago
  • coolkj86
    coolkj86
    • 5 years ago

    Hi. What do you mean by the 3rd point?. The drawing turns should be snapped to 45 and 90 degrees. Does it mean rotating the shapes?

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      Hello, thanks for your question.
      I mean when you draw a shape let say from left to right and then want to draw it down, your drawing should either go down by 90 degrees or 45 degrees, nothing in between.

      • 5 years ago
  • MiniFliper
    MiniFliper
    • 5 years ago

    Hi. This is a simple drawing application I did some time ago using Animate CC + CreateJS:
    https://codepen.io/joao-cesar/full/REbzXB

    Does this platform and this library work for you?

    Thanks!

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      Thank you for your comment and example.
      I have looked at the CreateJS library before. I just haven't seen any examples with anything close to what I'm trying to acheive.
      It is also on the hevier side, but I can live with that.
      You need to keep in mind theses things:
      All the shapes must be accessible as objects with the ability to modify, save and load them. Also, the shape resizing is non-stadard (reffer to the video example)

      • 5 years ago
  • webdevangel
    webdevangel
    • 5 years ago

    Hello ! thank you for your post.
    I have read the your description carefully.

    I have the sufficient experience(more 5 years) in developing of web app/hybrid app(animation, game, drag/drop, editing/processing image, drawing diagram, painting/drawing tool, html5 flipbook and audio playing) with javascript and html5 and also in tag animation with CSS, jquery and javascript on multi device.
    you can see many drawing tool with konvaJS on my portfolio.
    thanks.

    • 5 years ago
    1. ashevillemnt
      Contest Holder
      • 5 years ago

      Thank you for your comment!
      Which of the tools in your portfolio are done with Konva.js?
      Are you going to participate in this contest?

      • 5 years ago
  • mattsrinc
    mattsrinc
    • 5 years ago

    #increaseprize at least 3x (without using libraries? Then even more for the effort). And without #guaranteed few good proposals if at all will be entered.

    • 5 years ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!