lines drawn in canvas element are blurry, fuzzy in FF 10
I searched for blurry, fuzzy and antialiasing and found no solved replies in FireFox Help.
This code works correctly but the lines are blurry, fuzzy and wider than 1 px. This appears to be related to antialiasing. I read where there is now a built in antialiasing switch in the canvas element but none of the HTML5 references I found list this attribute.
When I enable "div" borders style="border-style:solid;" these lines are drawn correctly.
function triangle() { var c=document.getElementById("botCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(20,100); ctx.lineTo(70,100); ctx.closePath(); ctx.stroke(); }
All Replies (2)
Hi!
Sorry not to be super helpful but, have you tried to search for that in MDN? https://developer.mozilla.org/en-US/
Best, Ibai
On performing additional debugging I have resolved this issue. In my canvas tag I am using inline style to set the attributes of which both width and height are included. Here is an example:
<canvas id="topCanvas" style="position:absolute; top:100px; left:100px; width:900px; height:600px; border-style:solid; border-width:2px; border-color:red;">
When I remove the width and height from the inline style and enter them separately as width="900px" and height="600px" the canvas tag works as it should.
The apparent problem is that the inline style parser is most likely not correctly configuring the underlying SVG parameters. This is a bug and should be reported as such. Can someone test the code below and confirm the same results? Run this once as is and then switch the "canvas" tag with the one that is commented out and run it again. If you concur, please reply and I will mark this question as resolved. Also, if there is a way you have to make a bug report please do.
<html>
<body>
<!--
<canvas id="topCanvas" width="900px" height="600px" style="position:absolute; top:100px; left:100px; border-style:solid; border-width:2px; border-color:red;">
-->
<canvas id="topCanvas" style="position:absolute; top:100px; left:100px; width:900px; height:600px; border-style:solid; border-width:2px; border-color:red;">
<script language="javascript">
var canvas = document.getElementById("topCanvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(40,10);
ctx.lineTo(600,10);
ctx.stroke();
ctx.strokeStyle = "green";
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(600,20);
ctx.stroke();
ctx.strokeStyle = "yellow";
ctx.beginPath();
ctx.moveTo(20,30);
ctx.lineTo(600,30);
ctx.stroke();
ctx.strokeStyle = "olive";
ctx.beginPath();
ctx.moveTo(600.5,500.5);
ctx.lineTo(60.5,60.5);
ctx.stroke();
ctx.fillStyle = "maroon";
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(150, 150);
// was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right ->
ctx.lineTo(30, 30);
ctx.fill();
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
</script>
</body>
</html>
Modified by cor-el