Question

111

HTML5 canvas stroke() thick and fuzzy

rated 0 times [ 112] [ 1] / answers: 1 / hits: 29712 / 14 Years ago, thu, october 21, 2010, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ignacio

Add To Favorites

Follow

Total Points: 467

Total Questions: 128

Total Answers: 79

Location: Luxembourg

Member since Tue, Mar 14, 2023

1 Year ago

answered 14 Years ago lara · Accepted Answer

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');

    //...