увеличить HTML-холст

Question

Я хотел бы показать вырезку элемента canvas в другом элементе canvas.Для объяснения у меня есть следующая структура:

1. Элемент холста, который заполняет свой фон изображением.В верхней части этого изображения я рисую стрелку и возможный путь.Фоновое изображение действительно большое, а это значит, что я не могу получить столько информации из этого большого изображения.Это причина для пункта два.
2. Я хотел бы показать обрезку элемента canvas 1. Например, как на следующем рисунке:

В настоящее время я получаю координату красной стрелки в элементе холста 1, теперь я хотел бы сделать что-то вроде вырезания этого раздела со смещением, как на изображении.

Как я могу решить что-то подобное сJavaScript / JQuery.В итоге у меня есть два элемента холста.Один из них показывает большую карту с красной стрелкой, которая представляет текущее местоположение (это уже работает), но теперь я хочу показать второй элемент холста с масштабом этого раздела, где находится красная стрелка.В настоящее время я получаю координаты, но понятия не имею, как я могу «увеличить» элемент canvas.

Как уже говорилось в некоторых текущих ответах, я предоставляю код:

1. Мой HTML-код, есть mainCanvasMap с фоновым изображением и zoomCanvas, который должен отображать раздел mainCanvasMap!

2. Вот фрагмент кода JavaScript, которыйотображает красную стрелку на карте и должна обеспечивать функцию масштабирования (там, где расположена красная стрелка) для элемента zoomCanvas.

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>

Код является только псевдокодом, но показывает, что я люблю делать.

Answer 1

Ваш код использует CSS для изображения холста, который не всегда выглядит так, как мы думаем ...
Я рекомендую вам нарисовать все с нуля, вот отправная точка:

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">