画像のサイズを維持しながら、応答してサイズ変更されたキャンバスに描画します

Question

私は現在、画像を表示し、https://github.com/yiom/sketchpadを使用して画像を表示するシステムを持っています。このプラグイン（と他のもの、おそらくすべて）は、画像が最大幅/高さのCSSを使用してサイズ変更されたときにクリックした場所を描画しません。画像の別の部分で描画されます。私はプラグインが高さ/幅の属性と相対的ではなく、その高さ/幅の表示と比較してキャンバス上のポインタの位置を計算すると思います。

この問題は、表示されるバッファキャンバスを作成して解決しました。次に、ピクセルの高さ/幅を取得し、それを新しいキャンバスの属性に適用します。

これにより、イメージのサイズが変更されますが、これは望ましくありません。

私はこの問題をどのように解決することができますか？他の（無料/安価な）プラグインを使用している可能性があります。

Answer 1

キャンバスの幅と高さはスタイルプロパティと異なる場合：sketchpad.jsで

<canvas style="width:800px;height:800px" height="400" width="400" class="sketchpad" id="sketchpad"></canvas>

はこれを見つける：

Sketchpad.prototype._cursorPosition = function(event) { 
    return { 
     x: event.pageX - $(this.canvas).offset().left, 
     y: event.pageY - $(this.canvas).offset().top, 
    }; 
}; 

変更それに：

Sketchpad.prototype._cursorPosition = function(event) { 

    var wd = $(this.canvas).width()*1/$(this.canvas).attr('width')*1; 
    var hd = $(this.canvas).height()*1/$(this.canvas).attr('height')*1; 

    return { 
     x: (event.pageX - $(this.canvas).offset().left)/wd , 
     y: (event.pageY - $(this.canvas).offset().top)/hd , 
    }; 
};