0

Website: http://minimedit.com/

Currently implementing an eye dropper. It works fine in my normal resolution of 1080p, but when testing on a higher or lower resolution it doesn't work.

This is the basics of the code:

var ctx = canvas.getContext("2d");

canvas.on('mouse:down', function(e) {
    var newColor = dropColor(e, ctx);
}

function dropColor(e, ctx) {
    var mouse = canvas.getPointer(e.e),
        x = parseInt(mouse.x),
        y = parseInt(mouse.y),
        px = ctx.getImageData(x, y, 1, 1).data;
        return rgb2hex('rgba('+px+')');
}

When I first initiate the canvas I have it resize to fit resolution:

setResolution(16/9);

function setResolution(ratio) {
    var conWidth = ($(".c-container").css('width')).replace(/\D/g,'');
    var conHeight = ($(".c-container").css('height')).replace(/\D/g,'');
    var tempWidth = 0;
    var tempHeight = 0;

    tempHeight = conWidth / ratio;
    tempWidth = conHeight * ratio;

    if (tempHeight > conHeight) {
        canvas.setWidth(tempWidth);
        canvas.setHeight(conHeight);
    } else {
        canvas.setWidth(conWidth);
        canvas.setHeight(tempHeight);
    }
}

The x and y mouse coordinates work fine when zoomed in, but they don't line up with the returned image data. It seems as though the ctx isn't changing it's width and height and scaling along with the actual canvas size.

The canvas element is showing the correct width and height before using getContext as well.

Any ideas on a solution?

Feel free to check out the full scripts on the live website at: http://minimedit.com/

ncoll36
  • 11
  • 1
  • 5
  • Could be this: [Canvas is stretched when using CSS but normal with “width” / “height” properties](http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties) – Andreas Feb 16 '17 at 07:41
  • @Andreas I don't think so because I'm using the fabric js library which has it's own built in functions to set the size which I'm using. Plus I'm scaling with the JS, and not CSS. – ncoll36 Feb 16 '17 at 08:02

1 Answers1

1

Try "fabric.devicePixelRatio" for calculating actual position, for example:

x = parseInt(mouse.x) * fabric.devicePixelRatio

Alexander Matyukh
  • 21
  • 6