Magnifying Glass Effect Using HTML5

Introduction

 
Hello developers! This article will show how to create a cool magnifying or zoom effect of an image in your website on a mouse event. There are a few steps in applying this cool effect to your website.
 
You only need the same images of various resolutions (you can simply change the resolution using Paint).
 
Procedure
  • Make a web page structure in HTML (the HTML5 canvas tag will get used).
  • Design the effect in CSS.
  • Creat the functioning using JavaScript. 
     
     
Procedure
  • Declare two image elements for the special effects (for example large and magnify)
  • Use the HTML5 canvas tag for mouse events
  • Create events in JavaScript
  • Use CSS for the styling
Magnify Effect
 
 
HTML Page Code | Structure
 
First, we need a structure or a page for applying this stylish effect, so for this, you can create a simple HTML page or if you already have a website then you can apply the base code there as in the following:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.    <head>  
  4.       <title>Picmaniac</title>  
  5.       <link rel="stylesheet" type="text/css" href="style.css">  
  6.       <script src="JScript.js" type="text/javascript"></script>  
  7.    </head>  
  8.    <body onload="init()">  
  9.       <img id="largeImage" src="#">  
  10.       <img id="glassGraphic" src="#">  
  11.       .  
  12.       .  
  13.       .  
  14.       // your desired coding part here  
  15.       .  
  16.       .  
  17.       .  
  18.       <canvas id="canvas" width="720" height="1024"></canvas>  
  19.    </body>  
  20. </html> 
CSS Coding | Designing
 
After creating a page the next important part is the designing of the magnifying glass or object that will work over the images. So for this simply create definitions for the canvas and the design part of your content body and at last the description regarding your work. Here is the CSS code:
  1. #canvas {  
  2.     backgroundurl(`/gray.jpg);  
  3.     background-size: cover;  
  4.     background-repeatno-repeat;  
  5. }  
  6.   
  7. #largeImage,  
  8. #glassGraphic {  
  9.     displaynone;  
  10. }  
  11.   
  12. body {  
  13.     margin18px 20px;  
  14.     padding1;  
  15.     background#e0e0e0;  
  16. }  
  17.   
  18. // define code here for body part of html code   
  19. #description {  
  20.     backgroundrgb(18o, 18o, 180);  
  21.     border-radius: 10px;  
  22.     padding6px 16px;  
  23.     width120px;  
  24.     heightauto;  
  25.     float: inherit;  
  26.     margin-rightauto;  

JavaScript Code | Magnify Effect
 
JavaScript provides the main feature to this effect, for this am declaring a set of variables and creating corresponding functions.
  1. const lensRadius = 220;  
  2.    
  3. const lensRadius = 220;  
  4. const grabPointOffsetX = 175;  
  5. const grabPointOffsetY = 175;  
  6. var zoom;  
  7.    
  8. var canvas, context;  
  9. var mouseX, mouseXConstrained, mouseY, mouseYConstrained;  
  10. var xSource, ySource;  
  11.    
  12. var xMinium, xMaximum, yMinium, yMaximum; 
In the code above the declaration of variables is shown and the code below uses all those defined variables.
  1. function init() {  
  2.   
  3.     canvas = document.getElementById("canvas");  
  4.     canvas.addEventListener("mousemove", mouseTrack, false);  
  5.     canvas.addEventListener("touchmove", touchTrack, true);  
  6.   
  7.     context = canvas.getContext("2d");  
  8.   
  9.     xMinium = canvas.offsetLeft + 198 - grabPointOffsetX;  
  10.     xMaximum = canvas.offsetLeft + 570 - grabPointOffsetX;  
  11.     xMinium = canvas.offsetLeft + 198 - grabPointOffsetY;  
  12.     xMaximum = canvas.offsetLeft + 800 - grabPointOffsetY;  
  13.   
  14.     mouseX = 220 + canvas.offsetLest;  
  15.     mouseY = 720 + canvas.offsetTop;  
  16.   
  17.     zoom - document.getElementById("lagreImage").width / canvas.width * 0.8;  
  18.     drawMagGlass();  
  19.   
  20. }
  21. // function declaration
  22. function drawMagGlass() {  
  23.   
  24.     constrainPosition();  
  25.     xSource = 2 * mouseXConstrained - zoom * lensRadius + 2 * grabPointOffsetX;  
  26.     ySource = 2 * mouseYConstrained - zoom * lensRadius + 2 * grabPointOffsetY;  
  27.   
  28.     context.clearRect(0, 0 canvas.width, canvas.height);  
  29.     context.save();  
  30.   
  31.     context.beginPath();  
  32.     context.arc(mouseXConstrained + grabPointOffsetX, mouseYConstrained - grabPointerOffsetY, lensRadius, 0, 2 * Math.PI, false);  
  33.     context.closePath();  
  34.     context.clip();  
  35. }  
  36.   
  37. // Now filling in the gaps remained in  
  38. function constrainPosition() {  
  39.   
  40.     if (mouseX < xMinium) {  
  41.         mouseXConstrained = xMinium - canvas.offsetLeft;  
  42.     } else if (mouseX > xMaximum) {  
  43.         mouseXConstrained = xMaximum - canvas.offsetLeft;  
  44.     } else {  
  45.         mouseXConstrained = mouseX - canvas.offsetLeft;  
  46.     }  
  47.   
  48.     if (mouseY < yMinium) {  
  49.         mouseYConstrained = yMinium - canvas.offsetLeft;  
  50.     } else if (mouseX > xMaximum) {  
  51.         mouseYConstrained = yMaximum - canvas.offsetLeft;  
  52.     } else {  
  53.         mouseYConstrained = mouseY - canvas.offsetLeft;  
  54.     }  
  55.   
  56. }  
  57.   
  58. // finally calling of mousetrack function  
  59. function mouseTrack(e) {  
  60. &Magnify Effectnbsp; 
  61.     if (!e) {  
  62.         var e = event;  
  63.     }  
  64.     mouseX = e.clientX +  
  65.         ((document.documentElement.scrollLeft) ?  
  66.             document.documentElement.scrollLeft : document.body.scrollLeft);  
  67.     mouseY = e.clientY +  
  68.         ((document.documentElement.scrollTop) ?  
  69.             document.documentElement.scrollTop : document.body.scrollTop);  
  70.   
  71.     drawMagGlass();  
  72.   
  73. }  
  74.   
  75. function touchTrack(e) {  
  76.   
  77.     if (!e) {  
  78.         var e = event;  
  79.     }  
  80.   
  81.     mouseX = e.targetTouches[e].pageX;  
  82.     mouseY = e.targetTouches[e].pageY;  
  83.   

Example | Working
 
Magnify Effect To see these features live and to get in touch with it please visit http://picmaniac.brinkster.net/Photography.aspx
 
Views | Magnify Effect
 
View 1:
 
This view only shows how it really looks.
 
 
View 2:
 
This is the first original view and the view that users will see on your website. The magnifying effect will occur after clicking over this image (anywhere).
 
 
View 3:
 
After the click event, the image will zoom out like this.