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";
});

A voir également:

Pinceau décalage
Decalage sous titres prime - Forum TV & Vidéo
Changer taille pinceau illustrator - Forum After Effects
Décalage son/image streaming - Forum Audio
Outil pinceau illustrator bloqué - Forum Illustrator
Decalage son image disney plus - Forum Audio

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
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);

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 ! :)

Discussions similaires

Décalage son et image sur YouTube ?

Décalage horaire sur Whatsapp

Outil pinceau indisponible

Smart IPTV décalage de son

recopier une formule sans décalage

Discussions similaires

Newsletters