Creating an Image Zoomer in HTML5 Canvas

  • Reading time:5 mins read
HTML5 canvas - Image zoomer

HTML5 canvas – Image zoomer. New interesting tutorial – I will show you how you can create nice and easy Image zoomer using HTML5. Main idea – to draw a picture on the canvas, add event handlers to mousemove, mousedown and mouseup (to move the enlarged area near mouse cursor while holding the mouse).

Here are our demo and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the source files and lets start coding !

Step 1. HTML

Here are html code of our color picker page

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 canvas - Image zoomer | Dev School</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="container">
            <canvas id="panel" width="800" height="533"></canvas>
        </div>
        <footer>
            <h2>HTML5 canvas - Image zoomer</h2>
            <a href="https://dev-school.net/html5-canvas-image-zoomer/" class="stuts">Back to original tutorial on <span>Dev School</span></a>
        </footer>
    </body>
</html>

Step 2. CSS

Here are used CSS styles

css/main.css

*{
    margin:0;
    padding:0;
}

body {
    background-color:#bababa;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}

footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}

footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}

footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}

footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

.container {
    color:#000;
    margin:20px auto;
    position:relative;
    width:800px;
}

#panel {
    border:1px #000 solid;
    box-shadow:4px 6px 6px #444444;
    cursor:crosshair;
}

Step 3. JS

js/script.js

// variables
var canvas, ctx;
var image;
var iMouseX, iMouseY = 1;
var bMouseDown = false;
var iZoomRadius = 100;
var iZoomPower = 2;

// drawing functions
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    if (bMouseDown) { // drawing zoom area
        ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower);
        ctx.globalCompositeOperation = 'destination-atop';

        var oGrd = ctx.createRadialGradient(iMouseX, iMouseY, 0, iMouseX, iMouseY, iZoomRadius);
        oGrd.addColorStop(0.8, "rgba(0, 0, 0, 1.0)");
        oGrd.addColorStop(1.0, "rgba(0, 0, 0, 0.1)");
        ctx.fillStyle = oGrd;
        ctx.beginPath();
        ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true); 
        ctx.closePath();
        ctx.fill();
    }

    // draw source image
    ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
}

$(function(){
    // loading source image
    image = new Image();
    image.onload = function () {
    }
    image.src = 'images/image.jpg';

    // creating canvas object
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    $('#panel').mousemove(function(e) { // mouse move handler
        var canvasOffset = $(canvas).offset();
        iMouseX = Math.floor(e.pageX - canvasOffset.left);
        iMouseY = Math.floor(e.pageY - canvasOffset.top);
    });

    $('#panel').mousedown(function(e) { // binding mousedown event
        bMouseDown = true;
    });

    $('#panel').mouseup(function(e) { // binding mouseup event
        bMouseDown = false;
    });

    setInterval(drawScene, 30); // loop drawScene
});

What I doing: When we holding the mouse button and start moving it – variable bMouseDown become three. Then, in the main draw function we just going to check this variable and, in the case of the true, we’re just going to draw a new additional area with enlarged image (in a circle). After – pay attention to using of ‘globalCompositeOperation’. Using this method existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.

Live Demo

Conclusion

Hope that today’s lesson was interesting for you. In result we got smart and rational solution for zooming of images. Great, isn’t it? I will be glad to see your thanks and comments. Good luck!