在扩展页面时调整点击的坐标

Question

我在这里制作帆布游戏： http://www.codecademy.com/IStoleThePies/codebits/UJFpg4/edit

它充当点击式游戏，点击门会打开它。我这样做是通过设置我可以点击的坐标，然后得到回复：

function on_canvas_click(ev) {
    var x = ev.clientX - canvas.offsetLeft;
    var y = ev.clientY - canvas.offsetTop;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (x >= 205 && y >= 360 && x <= 295 && y <= 500 && hasItem == false && doorOpen == false) {
        alert("The door is locked, but a key might open it");
    }

但是，我还尝试根据显示器的大小增加整个画布的大小。我不希望整个画布的长度和宽度增加，而是让整个游戏更大，所以我做了以下内容：

CSS：

#myCanvas {
    width: 100%;
    height: 100%;
}

JS：

function init() {
    canvas = document.getElementById('myCanvas'),
    canvas.addEventListener('click', on_canvas_click, false);
    canvas.width  = window.innerWidth-430;
    canvas.height = window.innerHeight-200;

我希望这会增加游戏的大小，同时保持它与通常的外观成比例。但是，这会干扰门的点击范围的坐标。现在，我无法点击门并让它响应。我真的很感激任何帮助！