Bonjour, je viens vers vous car j'essaie de faire un petit programme pour dessiner avec ma souris à l'intérieur de l'élément Canvas. (je suis étudiant débutant)
En gros je n'arrive pas à comprendre comment faire pour déplacer mon canvas via le css et garder l'élément fonctionnel.
comme l'exemple suivant j'ajoute une marge gauche via css et quand je dessine sur le Canvas rien ne se passe en revanche
les coordonnées pour me permettre de dessiner commence à partir du coin gauche de la fenêtre. Si quelqu'un pouvait me guider afin de progresser merci beaucoup et bon week end.

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
 
		<head>
			<meta charset="UTF-8">
			<link rel="stylesheet" href="style.css">
      <title> canvas </title>
		</head>
 
        <body>
          <div id="moncanvas">
 
              <canvas>
              </canvas>
           </div>   
 
        	 <script src="canvas.js">
        	 </script>
        </body>
 
</html>
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
canvas
{
  margin-left: 500px;
border: 5px solid black;
background-color:silver;
}

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var canvas = document.querySelector("canvas");  // on va chercher la l'élément canvas 
 
 
// get canvas 2D context and set him correct size
var ctx = canvas.getContext('2d'); // on lui définit un context 2d
 
// last known position
//dernière position connue
//x coordonées horizontale 
//y coordonées verticales
var pos = {x:0, y:0}; // dernière position connu en gros par défault indique en haut à gauche point de départ
console.log(pos);
 
//window.addEventListener('resize', resize);     //redimension du canvas si besoin
 
document.addEventListener('mousemove', draw); // L'événement se produit lorsque le pointeur se déplace au-dessus d'un élément ou de ses enfants.
document.addEventListener('mousedown', setPosition); //  declenche un évènement quand on appuie sur un bouton.
document.addEventListener('mouseenter', setPosition); //  L'événement se produit lorsque le pointeur (pointer) est déplacé sur un élément.
 
//Fonction SetPosition
 
// nouvelle position de la souris quand le bouton est relâché
// new position from mouse event
function setPosition(e) {
  pos.X = e.clientX; //  clientX = Renvoie la coordonnée horizontale du pointeur de la souris par rapport à la fenêtre courante.
  pos.y = e.clientY; //  clientY = Renvoie la coordonnée verticale du pointeur de la souris par rapport à la fenêtre courante.
}
 
//--- function draw ----- 
 
function draw(e) {
  // mouse left button must be pressed
  if (e.buttons !== 1) return;    // 1 = clicgauche de la souris   si le btn 1 est actionné alors on retour la fonction draw
 
  ctx.beginPath(); // begin   // permet de définir un premier chemin du tracé
//console.log(ctx.beginPath);
  ctx.lineWidth = 5; // taille de la largeur du trait de dessin
  ctx.lineCap = 'round'; // forme de la fin  du trait de dessin
  ctx.strokeStyle = '#c0392b'; // couleur du trait de dessin
 
  ctx.moveTo(pos.x, pos.y); // from  // méthode CanvasRenderingContext2D.moveTo() de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées (x, y).
  setPosition(e);
  ctx.lineTo(pos.x, pos.y); // to    //La méthode CanvasRenderingContext2D.lineTo() de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées x, y spécifiées avec une ligne droite (sans tracer réellement le chemin).
 
  ctx.stroke(); // draw it!
}