0
255
ViewsWhy are lines becoming less opaque at edge of my HTML5 canvas?
I am in the process of creating a bar graph on an HTML5 canvas. It's just a bunch of lines created with .moveTo(), .lineTo(), and .stroke(). The code is down below.
I'm relatively new to canvas, but it seems like the task is a simple one. As a prototype, I am drawing random length lines on the canvas to give an idea of what the bar graph will eventually look like on the finished page.
The problem is, the lines are becoming noticeably less opaque at the far right edge of the canvas.
I have tried the same thing in Firefox and (Chromium-based) Edge and the effect is always the same. I have changed the conditional in the for loop to draw fewer lines. Still, the last handful or so are less opaque than the rest.
To make sure it was not my monitor or eyes playing tricks, I took a screenshot and used the dropper tool in GIMP to get the color values. It ranges from #0000FF, which is what I want, to #1010FF, #2020FF, and finally #7F7FFF at the most extreme right side of the graph.
Can anyone explain why this is happening and what I can do to correct it?
It seems like if it were some sort of "fade out" effect on the canvas that it ought to happen at all the edges and not just toward the right side.
Here's an image showing the effect:
<!DOCTYPE html>
<html>
<head>
<title>Bar Graph</title>
<script>
function draw() {
inverterOutputCanvas = document.getElementById('inverter-output').getContext('2d');
inverterOutputCanvas.strokeStyle = '#0000FF';
for (let i=0; i<730; i+=5) {
inverterOutputCanvas.moveTo(i+2, 100);
inverterOutputCanvas.lineTo(i+2, Math.floor(Math.random()*100));
inverterOutputCanvas.stroke();
}
}
</script>
</head>
<body onload="draw();">
<canvas id="inverter-output" width="730" height="100" style="border: 1px solid lightgray;"></canvas>
</body>
</html>
1 answers
Answer question0
The answer as to why the last bars in the graph were gradually fading out is due to me not using a .beginPath() and .closePath(). I think without this, what I thought I was drawing as individual lines were actually being treated as little segments of one big line. When I added .beginPath() and .closePath() inside my for loop, I got consistent color all the way through from left to right.
However, it was considerably less opaque than I had expected.
I believe the lack of opacity is perhaps due to anti-aliasing features. It seems consistent with the fading into the background color that I witnessed. Once I thickened the lines with inverterOutputCanvas.lineWidth = 3; everything began to look more like what I had expected in the first place.
The updated code is below.
Key takeaways are: always use .beginPath() and .closePath() for each line on the graph and use a thicker line to make it stand out more.
Here's the improved bar graph:
<!DOCTYPE html>
<html>
<head>
<title>Bar Graph</title>
<script>
function draw() {
inverterOutputCanvas = document.getElementById('inverter-output').getContext('2d');
inverterOutputCanvas.strokeStyle = '#0000FF';
inverterOutputCanvas.lineWidth = 3;
for (let i=0; i<730; i+=5) {
inverterOutputCanvas.beginPath();
inverterOutputCanvas.moveTo(i+2, 100);
inverterOutputCanvas.lineTo(i+2, Math.floor(Math.random()*100));
inverterOutputCanvas.stroke();
inverterOutputCanvas.closePath();
}
}
</script>
</head>
<body onload="draw();">
<canvas id="inverter-output" width="730" height="100" style="border: 1px solid lightgray;"></canvas>
</body>
</html>