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.
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:
- Link to the
Events
class:<script src="events.js"> </script>
- 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 ...
Get HTML5 Canvas Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.