html5 canvas: server or client fast transforms from longitude latitude to pixel values

Question

I am working on some maps and animations using the html5 canvas element (example visible here.) I would like to be able to efficiently generate pixel-valued linestrings (x1, y1, x2, y2), ideally from PostGIS, based on the geometry of the canvas. That is, in pseudo-geojson:

"Coordinates":"[[-122.0, 35.0], [-121.0, 36.0]]"

might output in the case of a function passed a 100px canvas-width parameter:

"Pixels":"[[30, 40],[50,60]]"

I would like to eventually enable urls like:

www.example.com/canvas_size:200/box_width:3-miles/center_point:lon|lat

so I assume this has to be done dynamically. How have other people tackled this kind of thing? It has occurred to me is to maybe treat the entire world as a 20,000,000 pixel canvas, store pre-transformed data in pixel form, then just offset it with client-side arithmetic. Any suggestions welcome, including approaches far afield of my first thoughts. If anyone is familiar with if or how this is done in Cartagen, would appreciate a pointer to a library or function or two.

Answer 1

Try this code where the pixels will adapt to the height and width of the canvas:

function getPoint(latitude, longitude, canvas_width, canvas_height) {
            var obj = {};
            obj.x = (latitude * canvas_height / 180.0) + (canvas_height / 2);
            obj.y = (longitude * canvas_width / 360.0) + (canvas_width / 2);
            return obj;
        }