Freeform drawing / uploading json data over an image using <canvas> and javascript

Question

I want to create application like a google map in which zoom and panning is present and markers are not get scaled but they translate to their respective position.

My project is need to plot JSON data(x, y co-ordinates) on Pdf/image/svg file.. and when zoomed the data only pdf/image/svg file should zoom and data on that should translate to their respective position but should not scale.

I never found any relevant example. All examples are like plot data on canvas or on svg elements..etc

My Query is.... Is this kind of application can be create with Canvas + javascript ? Or any other language need to use or any plugin?

Answer 1

You sure can.

I designed a mapping system that loads json ( geoJson at that ) onto a canvas. Symbols etc. I deliberately didn't scale, so that should be what you like to do.

Effectively, everything you do is either in device units ( pixel ) and real world units ( logical ).

I store all my data in logical units, and when drawn, convert them into device units. Since there is a difference between coordinate systems ( screen uses top left as 0,0 ) you have to calculate an offset between the two. Add a scale and you can zoom.

Initial scale is width of screen / width of data. Use a single scale value and scale X and Y by it to avoid stretching when you zoom.

Once you store your top, left and scale, you can convert any logical units to device units by:

Device point x = (logical point x - left) * scale

Device point y = (top - logical point y) * scale // Cartesian system correction!

and back to logical units by

Logical point x = (device point x/scale) + left

Logical point y = top - (device point y/scale) // Cartesian system correction!

Hope that helps!