problème code canvas simple Résolu/Fermé

Question

Bonjour,

Je veux tracer une ligne noire sur le canvas et sur celle-ci une plus petite jaune : je ne comprends pas pourquoi la ligne jaune recouvre totalement la noire (avec une couleur jaune plus nette sur son recouvrement). Quelle est mon erreur ?

Merci de votre aide

// Obtenir le contexte de dessin du canvas
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// dessiner une ligne noire
context.strokeStyle = "black";
context.lineCap = "square"; 
context.lineWidth = 1;
context.moveTo(52, 1);
context.lineTo(52, canvas.height);
context.closePath();
context.stroke();
// dessiner sur la ligne noire une ligne jaune plus petite
context.strokeStyle = "yellow";
context.lineCap = "square";
context.lineWidth = 1;
context.moveTo(52, 100);
context.lineTo(52, 103);
context.closePath();
context.stroke();

Macintosh / Firefox 108.0

jordane45 · Answer

Bonjour,

Tu as oublié les beginPath

// Obtenir le contexte de dessin du canvas
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// dessiner une ligne noire
context.strokeStyle = "black";
context.lineCap = "square"; 
context.beginPath();
context.lineWidth = 1;
context.moveTo(52, 1);
context.lineTo(52, canvas.height);
context.closePath();
context.stroke();

// dessiner sur la ligne noire une ligne jaune plus petite
context.strokeStyle = "yellow";
context.lineCap = "square";
context.lineWidth = 1;
context.beginPath();
context.moveTo(52, 100);
context.lineTo(52, 103);
context.closePath();
context.stroke();

Isaphira · Answer

Parfait, merci !

Problème code canvas simple

2 réponses

Discussions similaires