Home » Tutorials

Creating an Image Zoomer in HTML5 Canvas

Tutorials
Author Reading 7 min Views 271 Published by Modified by

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 of ??the motion while holding the mouse).

Here are our demo and downloadable package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. Step 3. JS
  6. js/script.js
  7. Conclusion
Live Demo
download in package

Ok, download the source files and lets start coding !

Step 1. HTML

Here are html code of our color picker page

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>HTML5 canvas - Image zoomer | Script Tutorials</title>
06         <link href="css/main.css" rel="stylesheet" type="text/css" />
07         <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
08         <script type="text/javascript" src="js/script.js"></script>
09     </head>
10     <body>
11         <div class="container">
12             <canvas id="panel" width="800" height="533"></canvas>
13         </div>
14         <footer>
15             <h2>HTML5 canvas - Image zoomer</h2>
16             <a href="http://www.script-tutorials.com/html5-canvas-image-zoomer/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
17         </footer>
18     </body>
19 </html>

Step 2. CSS

Here are used CSS styles

css/main.css

01 *{
02     margin:0;
03     padding:0;
04 }
05
06 body {
07     background-color:#bababa;
08     color:#fff;
09     font:14px/1.3 Arial,sans-serif;
10 }
11
12 footer {
13     background-color:#212121;
14     bottom:0;
15     box-shadow: 0 -1px 2px #111111;
16     display:block;
17     height:70px;
18     left:0;
19     position:fixed;
20     width:100%;
21     z-index:100;
22 }
23
24 footer h2{
25     font-size:22px;
26     font-weight:normal;
27     left:50%;
28     margin-left:-400px;
29     padding:22px 0;
30     position:absolute;
31     width:540px;
32 }
33
34 footer a.stuts,a.stuts:visited{
35     border:none;
36     text-decoration:none;
37     color:#fcfcfc;
38     font-size:14px;
39     left:50%;
40     line-height:31px;
41     margin:23px 0 0 110px;
42     position:absolute;
43     top:0;
44 }
45
46 footer .stuts span {
47     font-size:22px;
48     font-weight:bold;
49     margin-left:5px;
50 }
51
52 .container {
53     color:#000;
54     margin:20px auto;
55     position:relative;
56     width:800px;
57 }
58
59 #panel {
60     border:1px #000 solid;
61     box-shadow:4px 6px 6px #444444;
62     cursor:crosshair;
63 }

Step 3. JS

js/script.js

01 // variables
02 var canvas, ctx;
03 var image;
04 var iMouseX, iMouseY = 1;
05 var bMouseDown = false;
06 var iZoomRadius = 100;
07 var iZoomPower = 2;
08
09 // drawing functions
10 function clear() { // clear canvas function
11     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
12 }
13
14 function drawScene() { // main drawScene function
15     clear(); // clear canvas
16
17     if (bMouseDown) { // drawing zoom area
18         ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower);
19         ctx.globalCompositeOperation = 'destination-atop';
20
21         var oGrd = ctx.createRadialGradient(iMouseX, iMouseY, 0, iMouseX, iMouseY, iZoomRadius);
22         oGrd.addColorStop(0.8, "rgba(0, 0, 0, 1.0)");
23         oGrd.addColorStop(1.0, "rgba(0, 0, 0, 0.1)");
24         ctx.fillStyle = oGrd;
25         ctx.beginPath();
26         ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true);
27         ctx.closePath();
28         ctx.fill();
29     }
30
31     // draw source image
32     ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
33 }
34
35 $(function(){
36     // loading source image
37     image = new Image();
38     image.onload = function () {
39     }
40     image.src = 'images/image.jpg';
41
42     // creating canvas object
43     canvas = document.getElementById('panel');
44     ctx = canvas.getContext('2d');
45
46     $('#panel').mousemove(function(e) { // mouse move handler
47         var canvasOffset = $(canvas).offset();
48         iMouseX = Math.floor(e.pageX - canvasOffset.left);
49         iMouseY = Math.floor(e.pageY - canvasOffset.top);
50     });
51
52     $('#panel').mousedown(function(e) { // binding mousedown event
53         bMouseDown = true;
54     });
55
56     $('#panel').mouseup(function(e) { // binding mouseup event
57         bMouseDown = false;
58     });
59
60     setInterval(drawScene, 30); // loop drawScene
61 });

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
download in package

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!

Rate article
© 2025 Script Tutorials