<canvas> Bordure noire indésirable autour d'un rectangle

**diagonale** · 23/02/2020, 07h31

Bonjour,
Voici mon code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<script src="canvas.js"></script>	
<canvas id ='canvas0'></canvas>
<script src="canvas.js"></script>	
</body>
</html>

Voici mon code JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var canvas0 = document.querySelector('#canvas0');
var context0 = canvas0.getContext('2d');
canvas0.width = canvas0.height = 290;
context0.strokeStyle = "red";
context0.lineWidth  = 3;
context0.beginPath();
context0.rect(20, 20, 80, 80);
context0.stroke();

Bon rien de bien transcendant j'obtiens un rectangle rouge.
Maintenant si je modifie la couleur de fond en bleu

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<body style="background-color:rgb(0,0,255);">

J'obtiens toujours un rectangle rouge mais cette fois avec une tres fine fine bordure noire que je n'arrive pas a supprimer...
Nom : d.png
Affichages : 238
Taille : 943,4 Ko

Nom : d.png
Affichages : 238
Taille : 943,4 Ko

**NoSmoking** · 24/02/2020, 10h25

Bonjour,

J'obtiens toujours un rectangle rouge mais cette fois avec une tres fine fine bordure noire que je n'arrive pas a supprimer...

ceci est lié à l'antiliasing appliqué par les navigateurs et dont ils sont les seuls gestionnaires de la façon de procéder.

Tu peux néanmoins améliorer la situation (rendu), en affectant les positions sur des « 1/2 pixels ».

Un exemple à tester pour voir la différence de rendu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const larg = 80;
const haut = 80;
const posX = 20;
const posY = 20;
ctx.strokeRect(posX, posY, larg, haut);
ctx.strokeRect(posX + 100.5, posY + .5, larg, haut);

Une autre façon de procéder est de « translater » le context d'« 1/2 pixel ».

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const larg = 80;
const haut = 80;
const posX = 20;
const posY = 20;
ctx.translate(0.5, 0.5);
ctx.strokeRect(posX, posY, larg, haut);

c'est plus concis.

**diagonale** · 25/02/2020, 08h43

Je me doutais un peu que l'antialias faisait des siennes.
Les solutions proposees ne sont malheureusement pas satisfaisantes.
Comme le pb se pose avec la couleur bleue j'ai decide de ne pas l'utiliser...
Solution plutot moyenne, mais parfois il faut savoir contourner plutot qu'affronter

merci pour la reponse...

<canvas> Bordure noire indésirable autour d'un rectangle

JavaScript

Discussions similaires

Partager

Partager