I am designing a very basic, web based, drawing-type application (compatibility with desktops is enough) where my users can drag and drop multiple objects onto a designated area.
The objects have different colors and shapes (only basic geometric shapes such as rectangles, trapezoids, etc.), and the user can resize them or rotate them, then save the design (which just sends the coordinates of the objects to database).
I am learning how to design this from scratch.
Should I mainly use jQuery or should I use the HTML Canvas element, for the above type of webpage application, and what are the pros and cons?
I understand that they are both based on Javascript, but I am asking so that I know which specific subset to start my learning with.
I’d suggest using a framework like KineticJS. jQuery is great for DOM manipulation (including drag and drop), but not for image processing (even basic use cases like yours). Canvas is good for the latter, but you’d have to implement the former yourself.
You could try to do both at the same time, but it would be awkward (you’d have to deal with multiple canvases at once, etc). Using a library that already does both will save you a lot of effort.
Note: That refers only to the user interface. To send data back and forth to your server, jQuery has functions to simplify ajax calls, with good cross-browser behavior. Other frameworks may have similar utilities too, but jQuery is the one I’m familiar with, so it’s what I recommend.