html5 Canvas Select an Area and Zoom

Question

I am in the midst of reimplementing an interactive heatmap from svg to canvas in javascript. I was wondering if anyone had any ideas for how allow someone to select an area and have it zoom into that area using html5 canvas and js.

Many thanks, Tom

Answer 1

Disclaimer: Because you haven't provided any code I am going to stick to Strategy here :)

Method 1: DIY

First thing you will have to decide is what your resolution or cell size in your case is and what happens to a individual cell when you zoom.

Case 1: Your cell size increases, and you just multiply the cellsize by the factor of zoom and clip the area that goes out of bounds of what user selected.

Case 2: You want your heatmap cells to be pixel sized in which case when you zoom in, now each of the previous pixel(or cell) will have to interpolated and you will increase the resolution by the factor of zoom. Of course you will have to re-run heat map function for that region with a greater resolution.

Once you have one of the two strategy figured out, Implementation on JavaScript it actually quite simple.

1. You hook into drag-event. and let users draw a rectangle to show them the reference area they are zooming into.

2. Then you calculate you zoom factor based on the ratio of the drawn rectangle, to the original image or the container. This becomes your zoom-factor

3. Now using the zoom factor you generate a new image, based on Case1 or Case2 depending on which you go with

4. Finally you replace existing image with old one.

5. Viola! Zoom!!

Method 2: Use a Library!

Use a awesome library like OpenLayers 3, and just load your heatmap into it. Here's an Heatmap Example done in OpenLayers 3. Zoom pan now come for FREE!

Hope this helps.