Geek asks and answers

HTML5 blurred and not for sale

I follow the tutorial at: http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

My problem is that the line turned out to be blurry, and not solid and beautiful, as on the website.

here is the code:

    var canvas = document.getElementById("rightSide");
    var context = canvas.getContext("2d");

    context.beginPath();
    context.moveTo(50, 100);
    context.lineTo(200, 100);
    context.stroke();


#leftSide {
    width:200px;
    padding:15px;
    background:#eee;
    border:1px solid #aaa;
    float: left;
}

#rightSide {
    width:1000px;
    height: 700px;
    padding:15px;
    background:#eee;
    border:1px solid #aaa;
    float: left;
    margin:0px 0px 0px 20px;
}


<div id="leftSide">
    <a class="trigger" href="#">Areas</a>
    <ul class="level1">
                <li><a href="http://www.google.com">Area 1</a></li>
                <li><a href="#">Area 2</a></li>
                <li><a href="#">Area 3</a></li>
                <li><a href="#">Area 4</a></li>
                <li><a href="#">Area 5</a></li>
                <li><a href="#">Area 6</a></li> 
    </ul>

</div>

<canvas id="rightSide"></canvas>

thank

Edit: I actually found something very interesting, but I still don't understand how this happens. when I moved the canvas size coordinates from CSS to the tag, the line displays OK.

canvas id = "rightSide" width = "800px" height = "600px">

I would really like the explanation of what is happening here. Thank.

+3
source share
2 answers

To build Parth's answer (correctly identified in the comments), the actual canvas size is determined by attributes, not CSS.

, , 100x100, 200x200. , 100x100 CSS.

<style>
    canvas {width: 200px; height: 200px}
</style>
<canvas width="100" height="100"></canvas>

, iPhone 4 iPad 3, . (100x100 100x100 ). :

<style>
    canvas {width: 200px; height: 200px}
</style>
<canvas id="retina" width="400" height="400"></canvas>
+4

( -, , lineTo, arcTo, quadraticCurveTo).

, (50,50) (300,50), -, , 49,5 -50 && 55-55,5 ( 5).

, , . , ( , dda, ).

: http://jsfiddle.net/parth1403/xt7dN/2/

0

More articles: