CODEWITHSUNDEEP
htmlcanvasopacityalphargba
Vinícius
Vinícius

Reputation: 33

HTML5 canvas - same RGBA style produces different colours when alpha < 1

In the example below, the same strokeStyle produces different colours, varying according to the length of the line (?).

This only happens if alpha < 1.

What is the reason for this weird behaviour? Is there a better way to set the transparency of the stroke, so that I get the same result regardless of the length?

Thank you.

var c = document.getElementById('c1');
var ctx = c.getContext('2d');

ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, 400, 400);

ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(0, 0, 255, 0.3)';

ctx.moveTo(10, 10);
ctx.lineTo(20, 10);
ctx.stroke();

ctx.moveTo(10, 30);
ctx.lineTo(40, 30);
ctx.stroke();

ctx.moveTo(10, 50);
ctx.lineTo(80, 50);
ctx.stroke();

ctx.moveTo(10, 70);
ctx.lineTo(160, 70);
ctx.stroke();

ctx.moveTo(10, 90);
ctx.lineTo(320, 90);
ctx.stroke();
#c1 {
  border: 1px solid black;
}
<canvas width="330" height="100" id="c1">
</canvas>

Upvotes: 3

Views: 101

Answers (1)

user31415
user31415

Reputation: 466

var c = document.getElementById('c1');
var ctx = c.getContext('2d');

ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, 400, 400);

ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(0, 0, 255, 0.3)';


ctx.moveTo(10, 10);
ctx.lineTo(20, 10);


ctx.moveTo(10, 30);
ctx.lineTo(40, 30);

ctx.moveTo(10, 50);
ctx.lineTo(80, 50);


ctx.moveTo(10, 70);
ctx.lineTo(160, 70);


ctx.moveTo(10, 90);
ctx.lineTo(320, 90);
ctx.stroke();
#c1 {
  border: 1px solid black;
}
<canvas width="330" height="100" id="c1">
</canvas>

I do not know the cause for this behaviour, but the solution is to only stroke at the end.

Hope this helps!

Upvotes: 2

Related Questions