javascript - 画面のサイズ変更後に Konva イベントの位置がずれている

Question

私のコードでは、フルスクリーンの外観を維持するために、Konva キャンバスと konvajs-content 要素のサイズを変更しています。

resizeCanvas()
window.onresize = function() { resizeCanvas(); }

function resizeCanvas() {
var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight || e.clientHeight || g.clientHeight;

    var ratio = x / y;
    var should = 1920 / 1080;

    var cv = document.getElementsByTagName("canvas")[0];
    var cc = document.getElementsByClassName("konvajs-content")[0];

    var cx, cy;
    var cleft=0;
    if(ratio > should) {
        cx = (y * 1920/1080);
        cy = y;
        cleft = (x - cx) / 2;
    } else {
        cx = x;
        cy = (x * 1080/1920);
        cv.setAttribute("style", "width:" + x + "px;height:"+ (x*1080/1920) + "px;");
    }
    cc.setAttribute("style", "width:" + x + "px;height: " + y + "px;");
    cv.setAttribute("style", "width:" + cx + "px;heigth: " + cy + "px; position: relative; left: " + cleft + "px");
}

イベント入力をキャプチャしようとするまで、これはすべてうまく機能します。JSFiddle でわかるように、'Test' テキストをクリックしようとしても、イベントは発生しません。

しかし、テキストの左に ~40 ピクセル、テキストの上に 20 ピクセルをクリックすると、イベントが発生します。

https://jsfiddle.net/3qc3wtr3/2/

サイズ変更動作を維持し、要素の実際の位置に基づいてイベントが発生するようにする方法はありますか?