HTML5 Canvas Image Size Click to Enlarge

Question

I have a map image on canvas that I would like to use as a Google map interface using HTML5 and jQuery. I would like to do the following:

• Double click on pan in without changing the size of the containing div • Click on a building to bring up a pop up of information on that building • Click and drag to pan 

The code I have now is an image in a canvas. I found several codes that show “scaling” in the image, but either resize the div container, or are not a smooth and responsive way to execute it, it just jumps to a larger size, and I would like the scaling to be animated.

There will be several buildings on the map that are “pinned” on the map, which the user can click to open information about this building.

The code is as follows:

JS:

 $( document ).ready( function() { var canvas = document.getElementById( 'canvas' ); var context = null; var map = null; if( canvas.getContext ) { context = canvas.getContext( '2d' ); $( '#map' ).load( function( evt ) { context.drawImage( evt.currentTarget, 10, 10 ); } ); map = new Image(); map.onload = function() { context.drawImage( this, 20, 20 ); }; map.src = 'images/asu_poly_map.png'; } else { alert( 'Your browser does not support canvas.' ); } } ); 

HTML:

 <div id="map"> <canvas id="canvas" width="1055" height="600"></canvas> </div> 

CSS

 #map { margin:0 auto; margin-top : 180px; width : 1200px; } 

EDIT: I assume that it will be something similar to this, but cannot figure out how to apply it to the image from the server drawn on the canvas.

Zoom in (using scale and translation)

Answer 1

Boom! I combined a bunch of StackOverflow links into something that works for you: http://jsfiddle.net/CMse5/1/

Here is the code:

HTML:

 <div id="map"> <canvas id="canvas" width="300" height="300"></canvas> </div> 

CSS

 canvas { border: 1px solid black; } 

JS:

 $( document ).ready( function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var scale = 1.5; var originx = 0; var originy = 0; var imageObj = new Image(); imageObj.src = 'http://placehold.it/300x300'; function draw(){ // From: http://goo.gl/jypct // Store the current transformation matrix context.save(); // Use the identity matrix while clearing the canvas context.setTransform(1, 0, 0, 1, 0, 0); context.clearRect(0, 0, canvas.width, canvas.height); // Restore the transform context.restore(); // Draw on transformed context context.drawImage(imageObj, 0, 0, 300, 300); } setInterval(draw,100); canvas.onmousewheel = function (event){ var mousex = event.clientX - canvas.offsetLeft; var mousey = event.clientY - canvas.offsetTop; var wheel = event.wheelDelta/120;//n or -n //according to Chris comment var zoom = Math.pow(1 + Math.abs(wheel)/2 , wheel > 0 ? 1 : -1); context.translate( originx, originy ); context.scale(zoom,zoom); context.translate( -( mousex / scale + originx - mousex / ( scale * zoom ) ), -( mousey / scale + originy - mousey / ( scale * zoom ) ) ); originx = ( mousex / scale + originx - mousex / ( scale * zoom ) ); originy = ( mousey / scale + originy - mousey / ( scale * zoom ) ); scale *= zoom; } } ); 

In addition, you specify the zoom animation smoothly. To do this, you will need to facilitate the scaling of each frame. Thus, within your drawing function, each frame that you want to facilitate between the original scale and the new one. You will definitely want to modify requestAnimationFrame to get a better frame rate.

It may be easier to use the canvas / DOM hybrid and use CSS3 transforms and animations on the image, which will take care of all the softenings for you. If necessary, you can apply all the necessary canvases.