title: Zoom in and out on KineticJS Image without losing quality
body: <p>I've seen a few questions and some very helpful answers about how to either downsize and image without losing quality or zoom and image smoothly.</p>
  
  <p>My particular challenge is that I need to do both.  The canvas is to hold an illustrated map with several "points" plotted over top of it.  When clicking on one of the points, the map needs to zoom in on that point.  On click again, the map needs to zoom back out.</p>
  
  <p>I have all the zooming functions working, as well as the plotting of the points and that stuff.  My problem is that I can only optimize for image quality when the map is either zoomed in (currently using a 2x image for the 2x zoom) or when it is zoomed out (use an image the size of the canvas itself).  </p>
  
  <p>When using the large image, the default "zoomed out" state of the map looks blurry and is poor.  When zooming in on the large image, it looks great (the client even said so).  When using the small image, the default "zoomed out" state looks great, but the map gets pixelated when zooming in.</p>
  
  <p>Short of creating 2 separate image elements (one large and one small) and changing the opacity of each one at the end of the tween, I'm not sure what to do.</p>
  
  <p>I've tried using an intermediate sized canvas as the Kinetic.Image() source, but that muddies the waters on both ends. I've also tried adjusting the zoom level (scale amount) but that makes the new center point calculation crazy.</p>