How to add a preview window for HTML5 canvas

Question

I have a page with the canvas element on it. I am using it to map coordinates of floor-plans. The canvas loads an external image and it will record all the mapped coordinates.

Please take a look at the URL below to understand what I am saying. Many features are not functional in the page yet and the canvas works fine with an 800x600 image.

HTML5 Canvas

The issue is, plotting these coordinates on the canvas might not be accurate and I want to add a Zoom functionality where i can see the plotting markers in a separate zoomed window, similar to the jQuery image Zoom plugins. These plugins don't work here because I need real-time preview of the plotted markers.

I was thinking of cloning the canvas and user interactions into a second canvas but not sure if its is the right way.

Can anyone suggest me the best way to achieve this? Any help is greatly appreciated. Thanks.

Answer 1

well adding a preview for canvas will help you but doing it in another canvas of same page surely gonna risk browser's strength. It would be better to show preview by clicked some link which takes to another page.