キャンバスの幅と高さをCSSで設定すると、ペンが移動します

Question

キャンバスの幅と高さをCSSで設定すると、ペンが移動しています。ブラウザー（クロム）をズームイン/ズームアウトした後、ペンはもうシフトしません。 私は文字通りキャンバスウィジェットを使用していて、そのキャンバスを親divに合わせたいと思っています。キャンバスを初期化した後、jquery CSS関数を使ってキャンバスの幅/高さを設定します。しかし、私のペンは同じ座標にない。現在のブラウザでスクロールしたりスクロールしたりした後、ペンはマウスポインタの座標にあります。誰でも助けてくれますか？キャンバスで

$('.lc-drawing').find('canvas').css({'width':containerWidth, 'height':containerWidth}); 

Answer 1

あなたは通常、あなたが実際に幅と高さではなく、CSS /スタイルの幅と高さよりも、通常の属性を設定する必要が見つけます。

あなたのコードの共有と私の例では、しようとするだろう：

$('.lc-drawing').find('canvas').attr('width', containerWidth).attr('height', containerWidth); 

は、あなたはまた、あなたがキャンバスの高さと幅のための「containerWidth」を設定しようとしているを確認することはできますか？

キャンバスのサイズ変更に関しては、このような応答性のあるCSSを追加して位置の値を維持し、モバイル用にサイズを変更することを検討してください。

canvas { 
    width: 100%; 
    height: auto; 
} 

あなたはまだキャンバスに幅と高さの属性が必要です。