光标位置未与鼠标单击事件对齐

Question

我们正在努力让光标指针与我们正在实现Teechart库以实现波形的画布上的鼠标单击对齐。最近我做了更改以应用bo​​otstrap框架以使canvas响应。一旦我应用widht：100％和高度：100％画布将变为响应但光标指针未与鼠标单击对齐。光标指针和鼠标单击之间存在偏移量。你能不能建议我如何使帆布响应所有屏幕尺寸，而不会失去功能。

用于鼠标位置的JavaScript：

function getMousePos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            return {
              x: evt.clientX - rect.left,
              y: evt.clientY - rect.top,
              x0: evt.clientX,
              y0: evt.clientY
            };
        }

HTML：

<div class="canvasContainer" id = "CanvasContainer">
  <canvas id="canvas" class="contextCanvas" ></canvas>
</div>

CSS：

.canvasContainer {
    position: fixed;
    top: 12%;
    left: 3%;
    width: 94%;
    height: 82%;

    }
.contextCanvas {
    position: fixed;
    top:-3%;
    }

请帮我解决这个问题。