Question

I have a client who has requested I develop a simple web designer (ala CustomInk.com’s t-shirt designer) which allows users to drag & drop text and uploaded images onto a canvas.

I have some ideas about getting started with javascript/jQuery but I wanted to ask SO: What is the most universally accessible way (in terms of browser support etc.) of developing an editor like this?

Does anyone have any advice/experience in the matter before I start fooling around blindly?

Answer 1

For cross browser support, your job will be much easier if you decide to use a Javascript library, such as jQuery. The big reason for this is because jQuery will encapsulate all of the difference between Javascript implementations between browsers. Writing this all from scratch is not really feasible.

So in your case, it sounds like you want users to select pictures and text, drag and drop them on a canvas of sorts. Then, what’s your desired format for saving what they create? Are you trying to make a resulting image out of what they create?

To get started, I would check out jQuery UI. You can use the draggable and droppable functions for the front end, and when your users are done, you’ll need to post the coordinates of their elements, text, and which pictures they’re using, etc.

It seems like your biggest challenge is not making a pretty interface for this to happen, but instead, persisting what they create.