HTML5 canvas stroke() thick and fuzzy

Question

I'm trying to allow the user to draw a rectangle on the canvas (like a selection box). I'm getting some ridiculous results, but then I noticed that even just trying the code from my reference here, I get huge fuzzy lines and don't know why.

it's hosted at dylanstestserver.com/drawcss. the javascript is inline so you can check it out. I am using jQuery to simplify getting the mouse coordinates.

I was also getting thick and blurry output , i was setting width and height into % or vw or vh. By setting direct px to width and height worked in my case. — Sarju, Oct 22 '16 at 09:55

score 65 · Answer 1 · answered Oct 12 '12 at 16:00

The blurry problem will happen if you use css to set the canvas height and width instead of setting height and width in the canvas element.

<style>
  canvas { height: 800px; width: 1200px; }      WRONG WAY -- BLURRY LINES
</style>

<canvas height="800" width="1200"></canvas>     RIGHT WAY -- SHARP LINES

score 36 · Accepted Answer · answered Oct 21 '10 at 19:44

For some reason, your canvas is stretched. Because you have its css property width set to 100%, it is stretching it from some sort of native size. It's the difference between using the css width property and the width attribute on the <canvas> tag. You might want to try using a bit of javascript to make it fill the viewport (see jQuery .width()):

jQuery(document).ready(function(){
    var canvas = document.getElementById('drawing');
    canvas.width(($(window).width()).height($(window).height());
    var context = canvas.getContext('2d');
    //...

This comment really helped me, but there are a couple errors. This is the version of the code that worked for me. Since you used getElementById there is no .width() or height() function. `var canvas = document.getElementById('drawing');` `canvas.width = parent.width();` `canvas.height = parent.height();` — Brent Waggoner, Jun 18 '15 at 02:11

score 13 · Answer 3 · answered Feb 18 '16 at 00:17

13

The way I do it is to set the canvas element to a width and height in the css, and then set the canvas.width = canvas.clientWidth and canvas.height = canvas.clientHeight

var canvas =  document.getElementById("myCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var context = canvas.getContext("2d");

answered Feb 18 '16 at 00:17

miller the gorilla

860
1
7
19

2

This is a good option because it lets you set the size in CSS, where it naturally belongs, IMO. – ctorx Apr 05 '17 at 22:44
And where there are flexible ways to specify such as vw and vh. – trss Oct 24 '20 at 11:44

score 4 · Answer 4 · answered May 20 '14 at 22:35

4

On retina displays you also need to scale (in addition to the accepted answer):

var context = canvas.getContext('2d');
context.scale(2,2);

answered May 20 '14 at 22:35

laktak

57,064
17
134
164

2

This will increase the dimensions of the canvas. – Praveen Aug 14 '14 at 12:21

score 4 · Answer 5 · answered Oct 21 '10 at 19:52

4

You haven't indicated canvas size in pixels, so it is scaled up. It is 300x150 here. Try setting the width, height

answered Oct 21 '10 at 19:52

artificialidiot

5,309
29
27

score 2 · Answer 6 · answered Jan 21 '15 at 08:49

The css sizing issue mentioned in these comments is correct, but another more subtle thing that can cause blurred lines is forgetting to call make a call to context.beginPath() before drawing a line. Without calling this, you will still get a line, but it won't be smoothed which makes the line looks like a series of steps.

score 0 · Answer 7 · answered Aug 30 '14 at 21:56

I found the reason mine was blurry was that there was a slight discrepancy between the inline width and the CSS width.

I have both inline width/height parameters AND css width/height assigned to my canvas, because I need to keep its physical dimensions static, while increasing its inline dimensions for retina screens.

Check yours are the same if you have a situation like mine.

HTML5 canvas stroke() thick and fuzzy

7 Answers7

Linked

Related