zoom into html canvas

Question

I would like show a cutting of a canvas element in another canvas element. For explanation i have the following structure:

Canvas Element which gets filled it's background by an image. On top of this image i draw a arrow and a possible path. The background-image is really big, which means that i can not get that much Information from this big image. This is the reason for point two.
I would like to show a cutting of the canvas element 1. For example like the following image:

Currently i get the coordinate of the red arrow in canvas element 1, now i would like to do something like a cutting of this section with offset like in the image.

How could i solve something like this with JavaScript / JQuery. In summary i have two canvas elements. One of them is showing a big map with a red arrow which represents the current location (this works already), but now i wanna show a second canvas element with the zoom of this section where the red arrow is. Currently i am getting the coordinates, but no idea how i could "zoom" into an canvas element.

Like some of the current answers said, i provide some code:

My HTML Code, there is the mainCanvasMap, which has a Background Image and there is the zoomCanvas, which should display a section of the mainCanvasMap!
Here is a JavaScript snippet, which renders the red arrow on the map and should provide a zoom function (where the red-arrow is located) to the zoomCanvas Element.

var canvas = {}
canvas.canvas = null;
canvas.ctx = null;
canvas.scale = 0;


var zoomCanvas = {}
zoomCanvas.canvas = null;
zoomCanvas.ctx = null;
zoomCanvas.scale = 0;

    $(document).ready(function () {


        canvas.canvas = document.getElementById('mainCanvasMap');
        canvas.ctx = canvas.canvas.getContext('2d');


        zoomCanvas.canvas = document.getElementById('zoomCanvas');
        zoomCanvas.ctx = zoomCanvas.canvas.getContext('2d');
        
        setInterval(requestTheArrowPosition, 1000);
     });
     
     function requestTheArrowPosition() {
            renderArrowOnMainCanvasElement();
            renderZoomCanvas();
    }

    function renderArrowOnMainCanvasElement(){
          //ADD ARROW TO MAP AND RENDER THEM
    }

    function renderZoomCanvas() {

        //TRY TO ADD THE ZOOM FUNCTION, I WOULD LIKE TO COPY A SECTION OF THE MAINCANVASMAP
        zoomCanvas.ctx.fillRect(0, 0, zoomCanvas.canvas.width, zoomCanvas.canvas.height);
        zoomCanvas.ctx.drawImage(canvas.canvas, 50, 100, 200, 100, 0, 0, 400, 200);
        zoomCanvas.canvas.style.top = 100 + 10 + "px"
        zoomCanvas.canvas.style.left = 100 + 10 + "px"
        zoomCanvas.canvas.style.display = "block";

    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

    <!--MY MAIN CANVAS ELEMENT, WHICH HAS A BACKGROUND IMAGE AND WHERE THE ARROW IS RENDEREED-->
    <canvas id="mainCanvasMap" style="width:100%; height:100%; background: url('https://image.jimcdn.com/app/cms/image/transf/dimension=624x10000:format=jpg/path/s7d1eecaa5cee1012/image/i4484f962de0bf3c2/version/1543751018/image.jpg') 0% 0% / 100% 100%;"></canvas>


    <!-- MY ZOOM CANVAS ELEMENT, SHOULD SHOW A CUTTING OF THE MAINCANVASMAP -->
    <canvas id="zoomCanvas" style="height:100%;width:100%"></canvas>

The code is only a pseudo-code, but it shows what i like to do.

Did you search on something like "canvas zoom" on google? There comes a lot of examples on how to zoom in a canvas, try look at http://jsfiddle.net/mBzVR/4/ — Carsten Løvbo Andersen, May 27 '19 at 06:14
of course i did, but the difference is that all the solutions provides zooms for the canvas drawed element - in my example the red arrow. — Lukas Hieronimus Adler, May 27 '19 at 06:29
It would be a very good idea if you provided an example of your canvas, that way we can see what you have and also what you have tried to create this. — Carsten Løvbo Andersen, May 27 '19 at 06:31
Then what about this.https://stackoverflow.com/questions/52920759/javascript-canvas-apply-zoom-at-given-coordinates — Carsten Løvbo Andersen, May 27 '19 at 06:32
@CarstenLøvboAndersen this shows in my example only the drawing (red arrow) and not the complete canvas element. I would like to copy the complete canvas but only a cutting of this. — Lukas Hieronimus Adler, May 27 '19 at 08:35
@CarstenLøvboAndersen I did, but like i said its only pseudo-code. So there is no rendering of the arrow in the code above for example. But it shows the main problem now. I could not visualize the cutting of the canvas. — Lukas Hieronimus Adler, May 27 '19 at 12:44

Helder Sepulveda · Answer 1 · 2019-05-27T22:10:05.453

2

Your code is using css for the canvas image, that not always looks the way we think...
I will recommend you to draw everything from scratch, here is a starting point:

canvas = document.getElementById('mainCanvasMap');
ctx = canvas.getContext('2d');

zoomCanvas = document.getElementById('zoomCanvas');
zoomCtx = zoomCanvas.getContext('2d');
var pos = {x:0, y:40}

image = document.getElementById('source');
image.onload = draw;

function draw() {
  ctx.drawImage(image,0,0);
  setInterval(drawZoom, 80);  
}

function drawZoom() {
  // simple animation on the x axis
  x = Math.sin(pos.x++/10 % (Math.PI*2)) * 20 + 80 
  zoomCtx.drawImage(image, x, pos.y, 200, 100, 0, 0, 400, 200);
}

<canvas id="mainCanvasMap"></canvas>
<canvas id="zoomCanvas"></canvas>

<img id="source" src="https://image.jimcdn.com/app/cms/image/transf/dimension=624x10000:format=jpg/path/s7d1eecaa5cee1012/image/i4484f962de0bf3c2/version/1543751018/image.jpg" style="display:none">

edited May 27 '19 at 22:10

answered May 27 '19 at 21:52

Helder Sepulveda

15,500
4
29
56

Could you explain the problem with the css in more detail? i don't get the problem. Why is it needed to draw the image into the mainCanvasMap instead of using background? thanks for your help - and by the way: awesome code sample :) – Lukas Hieronimus Adler May 28 '19 at 07:26
@LukasHieronimusAdler I'm not 100% sure about the precise details, but in my experience the canvas and the css seem like two separate worlds ... setting the image background or the width and height with css causes some undesired behaviors like stretching your image, if you want to strech the canvas to cover the entire page see: https://stackoverflow.com/questions/1664785/resize-html5-canvas-to-fit-window – Helder Sepulveda May 28 '19 at 11:48

zoom into html canvas

1 Answers1