O'Reilly logo

HTML5 Canvas Cookbook by Eric Rowell

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating an image magnifier

In this recipe, we'll create a really neat image magnifier by cropping out a section of a large image based on the mouse coordinates of a small image and then displaying the result on top of the small image.

Creating an image magnifier

How to do it...

Follow these steps to create an image magnifier that renders a magnified portion of an image when the user mouses over it:

  1. Link to the Events class:
    <script src="events.js">
    </script>
  2. Create an image loader that will load the small and large image and then call a callback function when the images have loaded:
    <script> /* * loads the images and then calls the callback function * with a hash of image objects ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required