javascript - マウスツールをキャンバス座標に動的に設定するにはどうすればよいですか?

Question

マウスで描画し、描画を画像として保存するために使用しているキャンバスがあります。マウス ツールの関数の座標をキャンバスの座標に設定するのに少し助けが必要です。

マウスをキャンバスに設定する関数は次のとおりです。

        function ev_canvas(ev) {
            ev._x = ev.layerX;
            ev._y = ev.layerY;

        var func = tool[ev.type];
        if (func) {
            func(ev);
        }
    }

これは、キャンバスが左上隅にある場合に機能します。マウスの相互作用座標を動的に設定するには、この関数が必要です。

問題は、スタイル シートを使用するようにページを設定すると、関数がキャンバスのスタイル設定された場所に調整されないことです。このようにキャンバスの座標から差を差し引くことができ、コンピューターの特定の最大解像度で機能します。

        function ev_canvas(ev) {
            ev._x = ev.layerX - 760;
            ev._y = ev.layerY - 130;

        var func = tool[ev.type];
        if (func) {
            func(ev);
        }
    }

キャンバスが画面上のどこにあるかに関係なく、この機能を機能させるにはどうすればよいですか?

編集

完全な JavaScript は次のとおりです。

if (window.addEventListener) {
window.addEventListener('load', function () {
    var canvas, context, tool;

    function init() {

        canvas = document.getElementById('digisigBox');
        if (!canvas) {
            alert('Error: I cannot find the canvas element!');
            return;
        }

        if (!canvas.getContext) {
            alert('Error: no canvas.getContext!');
            return;
        }

        context = canvas.getContext('2d');
        if (!context) {
            alert('Error: failed to getContext!');
            return;
        }

        tool = new tool_pencil();

        canvas.addEventListener('mousedown', ev_canvas, false);
        canvas.addEventListener('mousemove', ev_canvas, false);
        canvas.addEventListener('mouseup', ev_canvas, false);
    }

    function tool_pencil() {
        var tool = this;
        this.started = false;

        this.mousedown = function (ev) {
            context.beginPath();
            context.moveTo(ev._x, ev._y);
            tool.started = true;
        };

        this.mousemove = function (ev) {
            if (tool.started) {
                context.lineTo(ev._x, ev._y);
                context.stroke();
            }
        };

        this.mouseup = function (ev) {
            if (tool.started) {
                tool.mousemove(ev);
                tool.started = false;
            }
        };
    }


    function ev_canvas(ev) {

        ev._x = ev.clientX;
        ev._y = ev.clientY;

        var func = tool[ev.type];
        if (func) {
            func(ev);
        }
    }

    init();

}, false);

}

これは、view/html 内で使用する場所です。

    <script src="@Url.Content("~/Scripts/digisig.js")" type="text/javascript"></script>
<div id="container">
    @using (Html.BeginForm("Create_Signature"))
    {
        <div style="margin: auto; text-align: center;">
            <canvas id="digisigBox" width="400" height="200">
            </canvas>
          <script type="text/javascript">
                function putImage() {
                    var canvas = document.getElementById("digisigBox");
                    if (canvas.getContext) {
                        var ctx = canvas.getContext("2d");
                        var myImage = canvas.toDataURL("image/png");
                    }
                    var imageElement = document.getElementById("Signature");
                    imageElement.value = myImage;
                }
            </script>
            @Html.HiddenFor(x => x.Signature)
        </div>       
        <table>
            <tr>
                <td>
                    @Html.LabelFor(x => x.FirstName)
                </td>
                <td>
                    @Html.DisplayFor(x => x.FirstName)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(x => x.LastName)
                </td>
                <td>
                    @Html.DisplayFor(x => x.LastName)
                </td>
            </tr>
        </table>
        <input id="submit" onclick="putImage()" type="submit" value="Submit" />
    }
</div>

これが行うことは、キャンバス上の描画から画像を作成し、ポストバック後に画像を base64 として保存することです。さまざまな解像度でキャンバス内でマウスを動作させる方法がわかりません。キャンバスが coords(0,0) に配置される場合、これは完全に機能しますが、キャンバスをページからページへ移動する必要がある場合があります。