לאתר זה תהיה פונקציונליות מוגבלת בזמן שאנו מתחזקים אותו לשיפור החוויה שלך. אם מאמר מסויים לא פותר את הבעיה שלך וברצונך לשאול שאלה, קהילת התמיכה שלנו מחכה לעזור לך ב־Twitter תחת ‎@FirefoxSupport וב־Reddit תחת ‎/r/firefox.

חיפוש בתמיכה

יש להימנע מהונאות תמיכה. לעולם לא נבקש ממך להתקשר או לשלוח הודעת טקסט למספר טלפון או לשתף מידע אישי. נא לדווח על כל פעילות חשודה באמצעות באפשרות ״דיווח על שימוש לרעה״.

מידע נוסף

lines drawn in canvas element are blurry, fuzzy in FF 10

  • 2 תגובות
  • 1 has this problem
  • 9 views
  • תגובה אחרונה מאת PJAL

more options

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

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

כל התגובות (2)

more options

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

more options

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>

השתנתה ב־ על־ידי cor-el