Cursor position not aligned with mouse click event

Question

we are working on getting the cursor pointer aligned with the mouse click on a canvas where we are implementing Teechart libraries to implement waveform. Recently I have made changes to apply bootstrap framework in order to make canvas responsive. As soon as I apply widht:100% and height:100% canvas will become responsive but the cursor pointer is not aligned with mouse click. there is an offset between cursor pointer and mouse click. can you please suggest me how can i make canvas responsive to fit to all screen sizes without loosing the functionalities.

JavaScript for Mouse position:

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%;
    }

please help me to fix this issue.