Pinceau décalage [Résolu]

Signaler
Messages postés
143
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
3 mars 2021
 -
Messages postés
143
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
3 mars 2021
 -
Bonjour, j'ai essayé de mettre en place le canvas afin de pouvoir dessiner avec.

Cependant, quand je dessine, il y a un écart important entre le pointeur et le dessin du trait.

J'ai voulu décaler mon canvas un peu vers le bas, et je pense que c'est ça qui crée un décalage. Auriez-vous une idée de comment faire que mon pointeur soit bien au même endroit que la ligne que je trace? 


<!DOCTYPE html>
<html>

 <head>
  <title>Test web</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="page5style.css" />
      <link rel="stylesheet" href="navstyle.css" />
 </head>
  
  <body>
    <div id="circleRed"></div>

    <canvas></canvas>

    <script src="page5script.js"></script>
  </body>
</html>



canvas{
 border: 2px solid #ebdede;
 position: relative;
 top: 55px;
}

#circleRed{
 width: 50px;
 height: 50px;
 background-color: red;
 border-radius: 50px;
}

#circleRed:hover{
 border: 5px solid #f67e7e;
 box-sizing: border-box;
 animation: circleRedBorder 300ms;
}

@keyframes circleRedBorder{
 0%{border: 0px;}
 20%{border: 1px;}
 40%{border: 2px;}
 60%{border: 3px;}
 80%{border: 4px;}
 100%{border:5px;}
}




// mise en place du canvas
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;


// booléens
let painting = false;

function paintingOn(){
 painting = true;
}

function paintingOff(){
 painting = false;
 ctx.beginPath();
}

function draw(e){
 if(!painting) return;

 ctx.lineWidth = 10;
 ctx.lineCap = "round";
 ctx.strokeStyle() = "red";

 ctx.lineTo(e.clientX, e.clientY);
 ctx.stroke();
 ctx.beginPath(); //less pixelated
 ctx.moveTo(e.clientX, e.clientY);
}

canvas.addEventListener("mousedown", paintingOn);
canvas.addEventListener("mouseup", paintingOff);
canvas.addEventListener("mousemove", draw);

document.getElementById("circleRed").addEventListener("click",function(){
 ctx.strokeStyle() = "red";
});

2 réponses

Réponse 1 / 2
Messages postés
31579
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 mars 2021
 3 295
Bonjour,

Si tu as un decallage,
tu peux éventuellement ajouter un offset aux valeurs de e.clientX et e.clientY

par exemple 
 ctx.lineTo(e.clientX, e.clientY-105);
 ctx.stroke();
 ctx.beginPath(); //less pixelated
 ctx.moveTo(e.clientX, e.clientY-105);

Réponse 2 / 2
Messages postés
143
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
3 mars 2021
 1
Effectivement, ça a résolu mon problème!! Merci à toi ! C'est parfait ! :)
Répondre Posez votre question