HTML5 full_screen API を使用して、この文字をブラウザのフルスクリーン モードに拡大しています。
デモと再現手順については、https://bubbleideas.com/letters/html5-full_screen-apiに従ってください。
ブラウザーがマウスのポインター位置の (x,y) 値を返す方法に問題/バグがあるようです。full_screen モードでは、下にスクロールすると、マウス ポインターと走り書きのパスの間にオフセットが導入されます。
問題を再現する手順は次のとおりです。（上記のデモリンクに移動）
このページの右上にあるボタンをクリックしてください。
右下の描画ツール「フリーハンド」をクリック。ステーショナリー パネルが開きます (ペンまたは鉛筆ツールを選択します)。
描画領域に数回落書きします
少し下にスクロールして、同じペンで落書きしてみてください。マウス ポインターの位置と走り書きのパスの間にギャップ/オフセットがあることに気付くでしょう (これが問題です)。理想的には、フルスクリーンモードでもギャップがないようにする必要があります
誰かが前にここに来たことがありますか？また、これは正方形、円、三角形などの他の形状でもオフセットなしで完全に機能することに注意してください。
更新: (以下のコメントで「Iftah」が尋ねたように) fabric js に従って、マウスを押すたびにオフセットを再計算する calcOffset() を使用します。他の機能に関する限り、このようなことを行います。うまくいけば、これはいくつかのアイデアを与える
$("#rectangle-function").click(function (evt1) {
doCanvasUp();
initObjectDrawing();
//canvas.isDrawingMode = true;
canvas1 = document.createElement("canvas");
canvas1.height = canvas.height;
canvas1.width = canvas.width;
canvas1.id = "dummy-canvas";
canvas1.style.zIndex = 998;
canvas1.style.position = "absolute";
$(".page-body").prepend(canvas1);
$("#dummy-canvas").mousedown(function (evt) {
var context1 = canvas1.getContext("2d");
var offset = $("#dummy-canvas").offset();
startX = evt.pageX - offset.left;
startY = evt.pageY - offset.top;
context1.beginPath();
$("#dummy-canvas").mousemove(function (event) {
context1.clearRect(0, 0, canvas1.width, canvas1.height);
context1.strokeStyle = "#ff0000";
context1.lineWidth = 1;
context1.moveTo(startX, startY);
var offset1 = $("#dummy-canvas").offset();
var x = event.pageX - offset1.left;
var y = event.pageY - offset1.top;
var diffX = x - startX;
var diffY = y - startY;
context1.strokeRect(startX, startY, diffX, diffY);
context1.closePath();
context1.beginPath();
}).mouseup(function (eventf) {
$("#dummy-canvas").unbind('mousemove');
$("#dummy-canvas").unbind('mouseup');
var offset = $("#dummy-canvas").offset();
//$("#dummy-canvas").remove();
context1.clearRect(0, 0, canvas1.width, canvas1.height);
var endX = eventf.pageX - offset.left;
var endY = eventf.pageY - offset.top;
var diffX = endX - startX;
var diffY = endY - startY;
var rect = new fabric.Rect({
left: startX + diffX * 0.5,
top: startY + diffY * 0.5,
width: diffX,
height: diffY,
opacity: 1,
fill: null,
stroke: color
});
canvas.add(rect);
});
});