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

/*taille du canvas*/
function taillecanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
taillecanvas();
window.addEventListener("resize", taillecanvas);


/*tracé*/
ctx.strokeStyle = "black";
ctx.lineWidth = 0.5;  


/*mémorise la position du x et y précédent*/
let lastX = null;
let lastY = null;

document.addEventListener("mousemove", (e) => {
    if (lastX === null || lastY === null) {
        lastX = e.clientX;
        lastY = e.clientY;
        return;
    }

    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();

    lastX = e.clientX;
    lastY = e.clientY;
});


const dpr = window.devicePixelRatio || 1;
canvas.width = window.innerWidth * dpr;
canvas.height = window.innerHeight * dpr;
ctx.scale(dpr, dpr);