Magnifying Glass Effect Using HTML5

Introduction

Hello developers! This article will show how to create a cool magnifying or zoom effect of an image on 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 be used).
Design the effect in CSS.
Create the functioning using JavaScript.

Procedure

Declare two image elements for the special effects (for example large and magnified).
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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Picmaniac</title>
      <link rel="stylesheet" type="text/css" href="style.css">
      <script src="JScript.js" type="text/javascript"></script>
   </head>
   <body onload="init()">
      <img id="largeImage" src="#">
      <img id="glassGraphic" src="#">
      .
      .
      .
      // your desired coding part here
      .
      .
      .
      <canvas id="canvas" width="720" height="1024"></canvas>
   </body>
</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.

#canvas {
    background: url(`/gray.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

#largeImage,
#glassGraphic {
    display: none;
}

body {
    margin: 18px 20px;
    padding: 1;
    background: #e0e0e0;
}

/* define code here for body part of html code */
#description {
    background: rgb(18o, 18o, 180);
    border-radius: 10px;
    padding: 6px 16px;
    width: 120px;
    height: auto;
    float: inherit;
    margin-right: auto;
}

JavaScript Code Magnify Effect

JavaScript provides the main feature to this effect, for this am declaring a set of variables and creating corresponding functions.

const lensRadius = 220;

const lensRadius = 220;
const grabPointOffsetX = 175;
const grabPointOffsetY = 175;
var zoom;

var canvas, context;
var mouseX, mouseXConstrained, mouseY, mouseYConstrained;
var xSource, ySource;

var xMinium, xMaximum, yMinium, yMaximum;

In the code above the declaration of variables is shown and the code below uses all those defined variables.

function init() {
    
    canvas = document.getElementById("canvas");
    canvas.addEventListener("mousemove", mouseTrack, false);
    canvas.addEventListener("touchmove", touchTrack, true);
    
    context = canvas.getContext("2d");
    
    xMinimum = canvas.offsetLeft + 198 - grabPointOffsetX;
    xMaximum = canvas.offsetLeft + 570 - grabPointOffsetX;
    yMinimum = canvas.offsetTop + 198 - grabPointOffsetY;
    yMaximum = canvas.offsetTop + 800 - grabPointOffsetY;
    
    mouseX = 220 + canvas.offsetLeft;
    mouseY = 720 + canvas.offsetTop;
    
    zoom = document.getElementById("largeImage").width / canvas.width * 0.8;
    drawMagGlass();
    
}

// function declaration
function drawMagGlass() {
    
    constrainPosition();
    xSource = 2 * mouseXConstrained - zoom * lensRadius + 2 * grabPointOffsetX;
    ySource = 2 * mouseYConstrained - zoom * lensRadius + 2 * grabPointOffsetY;
    
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    
    context.beginPath();
    context.arc(mouseXConstrained + grabPointOffsetX, mouseYConstrained - grabPointerOffsetY, lensRadius, 0, 2 * Math.PI, false);
    context.closePath();
    context.clip();
}

// Now filling in the gaps remained in 
function constrainPosition() {
    
    if (mouseX < xMinimum) {
        mouseXConstrained = xMinimum - canvas.offsetLeft;
    } else if (mouseX > xMaximum) {
        mouseXConstrained = xMaximum - canvas.offsetLeft;
    } else {
        mouseXConstrained = mouseX - canvas.offsetLeft;
    }
    
    if (mouseY < yMinimum) {
        mouseYConstrained = yMinimum - canvas.offsetLeft;
    } else if (mouseX > xMaximum) {
        mouseYConstrained = yMaximum - canvas.offsetLeft;
    } else {
        mouseYConstrained = mouseY - canvas.offsetLeft;
    }
    
}

// finally calling of mousetrack function 
function mouseTrack(e) {
    // Magnify Effect 
    if (!e) {
        var e = event;
    }
    mouseX = e.clientX +
        ((document.documentElement.scrollLeft) ?
            document.documentElement.scrollLeft : document.body.scrollLeft);
    mouseY = e.clientY +
        ((document.documentElement.scrollTop) ?
            document.documentElement.scrollTop : document.body.scrollTop);
    
    drawMagGlass();
    
}

function touchTrack(e) {
    
    if (!e) {
        var e = event;
    }
    
    mouseX = e.targetTouches[e].pageX;
    mouseY = e.targetTouches[e].pageY;
    
}

Views Magnify Effect

View 1. This view only shows how it really looks.

Magnify Effect

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).

Original view

View 3. After the click event, the image will zoom out like this.

Zoom out