Problème code canvas simple

Résolu/Fermé
Isaphira Messages postés 2 Date d'inscription dimanche 8 janvier 2023 Statut Membre Dernière intervention 9 janvier 2023 - 8 janv. 2023 à 15:48
Isaphira Messages postés 2 Date d'inscription dimanche 8 janvier 2023 Statut Membre Dernière intervention 9 janvier 2023 - 9 janv. 2023 à 11:04

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

A voir également:

2 réponses

jordane45 Messages postés 38040 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 février 2024 4 622
8 janv. 2023 à 16:20

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();

.
Cordialement,
Jordane

0
Isaphira Messages postés 2 Date d'inscription dimanche 8 janvier 2023 Statut Membre Dernière intervention 9 janvier 2023
9 janv. 2023 à 11:04

Parfait, merci !

0