Масштаб холста в соответствии с разрешением экрана

Question

У меня есть приложение, в котором я загружаю изображение плана этажа на холст и затем изменяю размер холста, чтобы соответствовать размеру страницы. Частью этой функции является получение коэффициента изменения размера изображения, чтобы впоследствии я мог распечатать столы на том же холсте.

При разрешении 1352x768 он работает нормально, но с увеличением разрешения увеличивается и размер стола.

У меня есть 2 функции, отвечающие за рисование фона, а затем за рисование столов. Я искал причину проблемы, но не уверен, где она лежит. Любая помощь или направление расследования будет более чем приветствоваться.

Вот мои функции:

Это рисует фоновое изображение и получает коэффициент изменения размера

/***************************************************************
function bgLoaded(bgImg, imgCanvas, callBack)

Sets image scale amounts according to width and height of 
screen, appends image and image canvas to the page
**************************************************************/
function bgLoaded(bgImg, imgCanvas, callBack) {
    var w = $(window).width(); //1024, 1392, 2560

    var cH = $(bgImg).height(); //bgImage width/height - 1500 wide
    var cW = $(bgImg).width();

    ImageScale = w / cW; //global variable for all additions and screen changes

    //background image for the floorplan
    imgCanvas.attr("width", w + "px").attr("height", cH * ImageScale + "px");

    var imgContext = imgCanvas[0].getContext('2d');
    imgContext.scale(ImageScale, ImageScale);
    imgContext.drawImage(bgImg[0], 1, 1);

    //build canvases and contexts
    $('#desk_canvas').attr("width", w + "px").attr("height", cH * ImageScale + "px");
    $('#hit_canvas').attr("width", w + "px").attr("height", cH * ImageScale + "px").hide();

    //scale canvases to fit page
    ctxD = $('#desk_canvas')[0].getContext('2d');
    ctxH = $('#hit_canvas')[0].getContext('2d');

    $(bgImg).hide();
    $('body').append(imgCanvas);
    bgImg.hide();

    if (typeof callBack == "function") {
        callBack();
    }
}
/**************************************************************
end bgLoaded()
**************************************************************/

Это называется для рисования каждого отдельного стола

/***************************************************************
function clearDesk(desk, ctx, color)

Deletes old desk data and draws new
**************************************************************/
//function clearDesk(desk, ctx, color) {
function clearDesk(desk, color) {
    if (desk == undefined) return;

    //save contexts for rotation transforms if necessary
    ctxD.save();
    ctxH.save();

    var rotate = desk.rotation == 90 || desk.rotation == 270;


    //delete existing desk
    ctxD.rotate(desk.rotation * Math.PI / 180);
    ctxD.clearRect(desk.x + desk.rLeft, desk.y + desk.rTop, desk.width, desk.height);
    ctxH.clearRect(desk.x + desk.rLeft, desk.y + desk.rTop, desk.width, desk.height);
    ctxD.rotate((desk.rotation * -1) * Math.PI / 180);

    var x = desk.x;
    var y = desk.y;
    var h = desk.height * ImageScale;
    var w = desk.width * ImageScale;

    var img = $("#desk" + desk.deskType)[0];
    img.height = h;
    img.width = w;
    var iCvs = $("<canvas width='" + img.width + "px' height='" + img.height + "px' />")[0];
    var iCtx = iCvs.getContext('2d');
    iCtx.drawImage(img, 0, 0, img.width, img.height);
    //iCtx.scale(ImageScale, ImageScale);

    ctxD.translate(x, y);
    ctxH.translate(x, y);
    //only draw the desk image
    ctxD.rotate(desk.rotation * Math.PI / 180);
    ctxD.drawImage(iCvs, 0, 0, w, h);
    ctxD.rotate((desk.rotation * -1) * Math.PI / 180);

    //position for text and coloring
    ctxD.translate(desk.rLeft * ImageScale, desk.rTop * ImageScale);
    ctxH.translate(desk.rLeft * ImageScale, desk.rTop * ImageScale);

    //Handle rotation to make sure text is upright
    if (rotate) {
        ctxD.rotate(270 * Math.PI / 180);
        ctxH.rotate(270 * Math.PI / 180);
    }

    //Draw background Color
    if (color) {
        ctxD.fillStyle = color;
        ctxD.fillRect(0, 0, w, h);
    }
    else {
        ctxD.fillStyle = "#DDDDDD";
        ctxD.fillRect(0, 0, w, h);
    }

    //draw hit box square for click detection
    var hitCOLOR = getCustomColor(desk);
    ctxH.fillStyle = hitCOLOR;
    ctxH.fillRect(0, 0, w, h);

    //Add desk number
    ctxD.font = "bold " + w / 2 + "px Calibri";
    ctxD.fillStyle = "#000";

    ctxD.textAlign = 'center';
    ctxD.textBaseline = 'middle';
    ctxD.fillText(desk.DeskID, w / 2, h * .6);
    //    ctxD.fillText(desk.rotation, w / 2, h * .6);

    //    Reset all transforms
    ctxD.restore();
    ctxH.restore();


}
/**************************************************************
end clearDesk()
**************************************************************/

Опять же, будет полезна любая помощь в том, чтобы эти 2 функции рисования всегда синхронизировались с окном.

Кстати, изображения как для столов, так и для плана этажа изначально имеют размер до 1px на дюйм.