How to zoom in on a point using scale and translate ? - GeeksforGeeks

27 Feb, 2020
You are given a zoom in to particular image by using scale and translate method. In this zooming process, an image should be zoom in from the center of the image. That image has some width and height in case of rectangular shape and has proper dimensions according to the shape of the image. In zoom in process an image get bigger in size as per requirement. In an image viewer this zoom in process is very important. To get this process you can use scale() and translate() method.
The scale() method scales the current drawing into a smaller or larger size. If you scale a canvas, all future drawings will also be scaled. The position will also be scaled. If you scale(2, 2) drawing will be positioned twice as far from the left and top of the canvas as you specify. The translate() method remaps the (0, 0) position as the canvas. If you have an image and scale it by a factor of 2, the bottom-right point will double in both x and y direction as (0, 0) is the top-left of the image. If you like to zoom the image of the center then a solution is as follows:
Translate the image.
Scale the image by x and y factors.
Translate the image back.
Below example illustrate the above approach:Example:
<!DOCTYPE html><html>  <head>    <title>        Zooming process using scale and trsnslate    </title>    <style>        #canvas {            border: 2px solid black;        }        h1{            color: green;        }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</h1>        <p>Scroll your mouse inside the canvas</p>        <canvas id="canvas" width="600" height="200"></canvas>    </center>    <script>        var zoomIntensity = 0.1;          var canvas = document.getElementById("canvas");        var context = canvas.getContext("2d");        var width = 600;        var height = 200;          var scale = 1;        var orgnx = 0;        var orgny = 0;        var visibleWidth = width;        var visibleHeight = height;          function draw() {            context.fillStyle = "white";            context.fillRect(orgnx, orgny, 800 / scale, 800 / scale);            context.fillStyle = "green";            context.fillRect(250,50,100,100);         }        setInterval(draw, 800 / 60);                  // Scroll effect function        canvas.onwheel = function(event) {            event.preventDefault();            var x = event.clientX - canvas.offsetLeft;            var y = event.clientY - canvas.offsetTop;            var scroll = event.deltaY < 0 ? 1 : -2;              var zoom = Math.exp(scroll * zoomIntensity);              context.translate(orgnx, orgny);              orgnx -= x / (scale * zoom) - x / scale;            orgny -= y / (scale * zoom) - y / scale;              context.scale(zoom, zoom);            context.translate(-orgnx, -orgny);              // Updating scale and visisble width and height            scale *= zoom;            visibleWidth = width / scale;            visibleHeight = height / scale;        }    </script></body>  </html>
Output :
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to set space between the flexbox ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?