Is there a way to implement an image color picking javascript without the use of canvas?

I'm implementing a way of magnifying an image, which is now being displayed zoomed as the background image of another img element. This part is working as expected, I can move the mouse around, focus on the spot I need, click and sort of snap/capture a picture of this area (zoomed as the background of another container image). Now I need to implement a way of color picking from this zoomed image. After 3 days on it, I have not being able to bring that background zoomed image into a canvas to do the color picking, getting the right sizes has proven too hard for me. Is there a way to implement a color picking from my already working zoomed (background image) without the use of canvas ?

I have tried a few variations of this function to no avail:

                function useCanvas(canvas, image, callback) {
                var thisImg = new Image();
                var imgUrl = image.style.backgroundImage.replace('url("', '').replace('")', '');
                thisImg.src = imgUrl;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(thisImg,
                    colorContrast.xPos,
                    colorContrast.yPos,
                    thisImg.width, thisImg.height,
                    0, 0,
                    thisImg.width, thisImg.height
                );
                return callback();
            }

//zooming happens here
var container$ = document.getElementById('capture-image');
container$.style.backgroundImage = "url('" + img.src + "')";
container$.style.backgroundRepeat = "no-repeat";
container$.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";}

-thanks,

I was able to complete the task by incorporating this library: Magnifier.js which does not make use of a background image, but rather dynamically alter the magnified image as you move the glass.