Sujet Précédent Sujet Suivant

Pinceau décalage

Résolu/Fermé
charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 - Modifié le 11 févr. 2021 à 11:29
charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 - 11 févr. 2021 à 19:21
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
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718
11 févr. 2021 à 15:24
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);

1
Réponse 2 / 2
charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 1
11 févr. 2021 à 19:21
Effectivement, ça a résolu mon problème!! Merci à toi ! C'est parfait ! :)
0

Discussions similaires

Smart IPTV décalage de son
Cynco -
bazfile -

1 réponse
Outil pinceau indisponible
vctrsll -
Emili971 -

4 réponses
Décalage horaire sur Whatsapp
Nannie -
VincentVoltaCCM -

3 réponses
Changement taille outils pinceau/gomme
Line -
MagSouh -

1 réponse
recopier une formule sans décalage
aziz_alg80 -
aziz_alg80 -

2 réponses