Холст масштабируемый и получая реальные пиксельные координаты

Question

У меня есть изображение карты, которое было взято дроном и размер 8916x6888. Это слишком большой

Я уже рисую изображение в Canvas и ищу JavaScript, который можно использовать для масштабирования и перетаскивания холста, а также при наведении мыши на холст Я хочу, чтобы он возвращал координату реального пикселя, сейчас он возвращает пиксель с холста. (если я изменю размер холста, он вернет пиксельную координату изменяемого холста)

var canvas = document.getElementById('canvas1');
            var img = new Image();
            img.onload = function () {
                canvas.getContext("2d").drawImage(img, 0, 0, img.width,    img.height, 0, 0, canvas.width, canvas.height); 
            }
            img.src = "http://xxxx.com/xxx.png";

            canvas.addEventListener("mousemove",function(e){
                 var eventLocation = getEventLocation(this,e);
                var coord = "x=" + eventLocation.x + ", y=" + eventLocation.y;

                // Get the data of the pixel according to the location generate by the getEventLocation function
                var context = this.getContext('2d');
                var pixelData = context.getImageData(eventLocation.x, eventLocation.y, 1, 1).data; 

                // If transparency on the image
                if((pixelData[0] == 0) && (pixelData[1] == 0) && (pixelData[2] == 0) && (pixelData[3] == 0)){
                            coord += " (Transparent color detected, cannot be converted to HEX)";
                }


                //  and coordinates.
                console.log(coord);
            },false);

            function getElementPosition(obj) {
                var curleft = 0, curtop = 0;
                if (obj.offsetParent) {
                    do {
                        curleft += obj.offsetLeft;
                        curtop += obj.offsetTop;
                    } while (obj = obj.offsetParent);
                    return { x: curleft, y: curtop };
                }
                return undefined;
            }

            function getEventLocation(element,event){
                    var pos = getElementPosition(element);

                return {
                        x: (event.pageX - pos.x),
                    y: (event.pageY - pos.y)
                };
            }