Ajax-ish updating of a canvas element

Question

Ok this is more of general technology/approach question.

We have a very simple web 'app' which is basically just a canvas element. We're using javascript to draw a 'fancy UI' on the canvas. We register a mouseclick event, get the coordinates and then try to figure out what widget they clicked on.

My question is, what technology or framework would be best for doing this in an AJAX-ish sort of way? I want the page to render, then user the user clicks somewhere on the canvas, and we pass that coordinate back to some server-side code(PHP or Ruby) which will run some logic, update a database etc., and then come back with new data for the javascript Draw method, effectively updating the UI based on what the user selected, all with a minimum of blinking and refreshing.(although the canvas can be in an IFRAME)

What's the easiest approach to this? I've looked a little at Rails, but it seems like overkill. All I want is to pass back the click coordinates, run some server-side code, and come back with a new chunk of text to pass my javascript Draw function(the one that draws on the canvas element)

EDIT: ok, to be more precise, I'm essentially asking about the easiest way to post back simple string data via AJAX(meaning no full page refresh), and receive a string return value, and update a canvas tag with that return value. I'm not asking for code or an example(although I wouldn't complain) I'm just asking for thoughts on the easiest tech to use - jQuery, Prototype, Rails, JSON vs. XML, etc. The back end is all PHP or Ruby, so I dont need help there, just with the AJAX->Canvas portion of it.

Answer 1

Umm, I suggest Ajax. Its very Ajax-ish.

Okay, let me elaborate - that last line isn't very helpful, but neither is the question. Use JQuery/Prototype to make an ajax request to your service with the co-ordinate and other information you've gathered from the canvas element. Take the response to update canvas depending on what the original input was.

You question is very non-specific... you cite "an AJAX-ish sort of way"... well, that can mean so many things. To me, why go with something thats ajax-like, when you have the real deal ajax.

"What's the easiest approach to this? I've looked a little at Rails, but it seems like overkill. All I want is to pass back the click coordinates, run some server-side code, and come back with a new chunk of text to pass my javascript Draw function(the one that draws on the canvas element)"

Yup. We're still talking about Ajax.

Vote me down if you want, but better yet - clarify your question and let us know whether you're talking about how to implement passing data back and fourth, or whether you're looking for cutesy UI effects...

Answer 2

If all you want to do is do some calculations why not also do it in javascript?

If you need permanence, or are running intensive calculations then any of the following will do.

Easy to deploy Frameworks: * (That is to say, frameworks that have lots of documentation and tutorials available and are written in what are commonly considered to be easier scripting languages.)

CodeIgniter | CakePHP | Zend

Django

---

Harder to deploy Frameworks: * (That is to say, frameworks that have less documentation available (and limited tutorials) or are written in more difficult languages [that is, languages that commonly use more difficult paradigms])

Multiple Lisp Frameworks

C++ Frameworks

Multiple Perl Frameworks

More Java Frameworks than you could ever have time to use

I suggest reading up on them, checking the examples and choosing the one that seems most intuitive. Write one or two examples of things you would like to implement and if it still seems intuitive (or the support and tutorials make it easy) then use it to implement your whole project.

---

*Please note that this division is completely subjective.