Modify and Plot overlay using JSON Fabric js - json

Question

I have generated a JSON file with x, y coordinates to draw polylines using Fabric JS. However, my current problem is the coordinate system that I use is image pixels while the canvas I am drawing is openseadragon (OSD). Therefore, I will need to change the coordinates system from image pixels to viewport coordinate.
I know there is a function in openseadragon imageToViewportCoordinates that may do the conversion. However, the problem is how can I parse out the x , y coordinates, convert them and draw the polylines on fabric js canvas?
The JSON file is as below:
{"version":"2.0.0-beta7","objects":[
{"type":"polyline","fill":"rgba(250,0,0,0.8)","points":[
{"x":61146,"y":155098}
]},
{"type":"polyline","fill":"rgba(250,0,0,0.8)","points":[
{"x":61658,"y":154330}
]},
{"type":"polyline","fill":"rgba(250,0,0,0.8)","points":[
{"x":66778,"y":152538}
]},
{"type":"polyline","fill":"rgba(250,0,0,0.8)","points":[
{"x":67034,"y":152026}
]},
{"type":"polyline","fill":"rgba(250,0,0,0.8)","points":[
{"x":60634,"y":151002},
{"x":60378,"y":151258},
{"x":60122,"y":151258},
{"x":59866,"y":151258},
{"x":59610,"y":151258},
{"x":59354,"y":151514},
{"x":59098,"y":151514},
{"x":58842,"y":151514},
{"x":58586,"y":151770},
{"x":58330,"y":151770},
{"x":58074,"y":152026},
{"x":57818,"y":152282},
{"x":57562,"y":152282},
{"x":57306,"y":152282},
{"x":57306,"y":152538},
{"x":57050,"y":152794},
{"x":56794,"y":152794},
{"x":56538,"y":153050},
{"x":56538,"y":153306},
{"x":56794,"y":153306},
{"x":57050,"y":153306},
{"x":57306,"y":153050},
{"x":57562,"y":152794},
{"x":57818,"y":152794},
{"x":58074,"y":153050},
{"x":58330,"y":153306},
{"x":58586,"y":153562},
{"x":58842,"y":153562},
{"x":59098,"y":153562},
{"x":59354,"y":153306},
{"x":59610,"y":153562},
{"x":59866,"y":153818},
{"x":60122,"y":154074},
{"x":60378,"y":154074},
{"x":60634,"y":154074},
{"x":60890,"y":153818},
{"x":61146,"y":153818},
{"x":61402,"y":153818},
{"x":61146,"y":153562},
{"x":61402,"y":153306},
{"x":61658,"y":153050},
{"x":61914,"y":153306},
{"x":62170,"y":153562},
{"x":62170,"y":153818},
{"x":62426,"y":153818},
{"x":62682,"y":153818},
{"x":62938,"y":154074},
{"x":63194,"y":154074},
{"x":63450,"y":154330},
{"x":63194,"y":154586},
{"x":62938,"y":154586},
{"x":62682,"y":154586},
{"x":62682,"y":154842},
{"x":62426,"y":155098},
{"x":62170,"y":155098},
{"x":61914,"y":155354},
{"x":61914,"y":155610},
{"x":62170,"y":155610},
{"x":62426,"y":155610},
{"x":62682,"y":155866},
{"x":62682,"y":156122},
{"x":62426,"y":156378},
{"x":62682,"y":156634},
{"x":62426,"y":156890},
{"x":62170,"y":156890},
{"x":61914,"y":157146},
{"x":61658,"y":156890},
{"x":61402,"y":156890},
{"x":61146,"y":156634},
{"x":61402,"y":156378},
{"x":61146,"y":156634},
{"x":61146,"y":156890},
{"x":61146,"y":157146},
{"x":61402,"y":156890},
{"x":61658,"y":157146},
{"x":61658,"y":157402},
{"x":61402,"y":157658},
{"x":61146,"y":157914},
{"x":61146,"y":158170},
{"x":60890,"y":158426},
{"x":60634,"y":158682},
{"x":60634,"y":158938},
{"x":60890,"y":159194},
{"x":60890,"y":159450},
{"x":60890,"y":159706},
{"x":60890,"y":159962},
{"x":60890,"y":160218},
{"x":60890,"y":159962},
{"x":60890,"y":159706},
{"x":61146,"y":159450},
{"x":61402,"y":159194},
{"x":61658,"y":158938},
{"x":61914,"y":158682},
{"x":62170,"y":158682},
{"x":62426,"y":158426},
{"x":62682,"y":158682},
{"x":62682,"y":158426},
{"x":62938,"y":158170},
{"x":63194,"y":158170},
{"x":63194,"y":157914},
{"x":63450,"y":157658},
{"x":63706,"y":157658},
{"x":63962,"y":157402},
{"x":64218,"y":157146},
{"x":64474,"y":157146},
{"x":64730,"y":156890},
{"x":64986,"y":156634},
{"x":65242,"y":156634},
{"x":64986,"y":156378},
{"x":65242,"y":156122},
{"x":65242,"y":155866},
{"x":65498,"y":155610},
{"x":65498,"y":155354},
{"x":65498,"y":155098},
{"x":65754,"y":154842},
{"x":65498,"y":154586},
{"x":65498,"y":154330},
{"x":65498,"y":154074},
{"x":65242,"y":153818},
{"x":65242,"y":153562},
{"x":65242,"y":153306},
{"x":64986,"y":153050},
{"x":64986,"y":152794},
{"x":64730,"y":152538},
{"x":64474,"y":152282},
{"x":64218,"y":152026},
{"x":63962,"y":151770},
{"x":63706,"y":151514},
{"x":63706,"y":151258},
{"x":63450,"y":151258},
{"x":63194,"y":151258},
{"x":62938,"y":151002},
{"x":62682,"y":151002},
{"x":62426,"y":151258},
{"x":62170,"y":151514},
{"x":61914,"y":151258},
{"x":61658,"y":151258},
{"x":61402,"y":151002},
{"x":61146,"y":151002},
{"x":60890,"y":151002}
]}]}
Your help is appreciated!

Answer 1

You can change your viewport coordinates to match the coordinates you have in your JSON. For instance if you want the coordinates to stretch from 0 to 61,000, you could do this:
var viewer = OpenSeadragon({
...
tileSources: {
tileSource: url,
width: 61000
}
});