Search code examples
javascripthtmlcanvasstroke

HTML5 canvas stroke() thick and fuzzy


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.


Solution

  • 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');
        //...