SOURCE

console.log("sdfdsf")

const mycanvas = document.getElementById("my-canvas")
mycanvas.width = window.innerWidth;
mycanvas.height = window.innerHeight;

const ctx = mycanvas.getContext("2d");

const mouse = {
    x: 0,
    y: 0
}

const last_mouse= {
    x: 0,
    y: 0
}

mycanvas.addEventListener('mousemove', function(e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;

    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;
}, false)

function reset() {
    ctx.clearRect(0, 0, mycanvas.width, mycanvas.height )
}

function draw() {

    ctx.fillStyle = "black";

    // 坐标位置
    ctx.fillText(`Position: x: ${last_mouse.x}, y: ${last_mouse.y}`, 10, 10)
    ctx.fillText(`Position: x: ${mouse.x}, y: ${mouse.y}`, 10, 20)

    // 画出鼠标轨迹
    ctx.beginPath();
    ctx.moveTo(last_mouse.x, last_mouse.y)
    ctx.lineTo(mouse.x, mouse.y)
    ctx.lineWidth = "1.5"
    ctx.strokeStyle = "white"
    ctx.stroke();
}


function loop() {
    ctx.fillStyle = "rgba(0,0,100,0.05)";
    // ctx.fillStyle = 'burlywood';
    ctx.fillRect(0, 0, mycanvas.width, mycanvas.height)
    window.requestAnimationFrame(loop);
    draw()
}

loop();

<p>test canvas</p>
<div class="container">sdfdsf</div>
<div class="canvas-wrapper">
    <canvas id="my-canvas"></canvas>
</div>

.container {
    width: 500px;
    height: 500px;
    background-color:green;
}

.canvas-wrapper {
    width: 100%;
    border: 2px solid slateblue;
    position: absolute;
    top: 0;
}

#my-canvas {
    background-color: burlywood;
}