CODEWITHSUNDEEP
html5-canvas
Gleeb
Gleeb

Reputation: 11289

html5 line blurred and not sold

i am following the tutorial in: http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

my problem is that the line turned out blurred and not solid and beautiful like it turns out on they'r 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>

thanks

Edit: I have actually found something very interesting but i still don't understand how it makes any different. when i moved the canvas size coordinates from CSS to the tag, the line is shown OK.

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

would very much like an explanation on what is going on here. Thanks.

Upvotes: 3

Views: 2601

Answers (2)

Brian Nickel
Brian Nickel

Reputation: 27550

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

For example, if you were to have the following code, the drawing area would be 100x100 rather than 200x200. The blurring effect would be the same as if you had a 100x100 image with the same CSS.

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

This actually has interesting implications for devices like the iPhone 4 or iPad 3, which have four physical pixels for each device pixel. In that case, a properly sized canvas (100x100 for 100x100 would be blurry). In that case, you actually need to double your canvas for a crisp image:

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

Upvotes: 4

Parth
Parth

Reputation: 529

Browsers usually do anti aliasing of line drawn(actually anything using context functions like lineTo,arcTo,quadraticCurveTo).

So, if you have given the start point (50,50) & end point (300,50), it will anti alias it,so the drawn line will be shown blurred because it will draw blurred color of line in 49.5-50 && 55-55.5(if line width is 5).

So, some times solution is to give co-ordinate in floating point. Browsers accept floating point co-ordinate and don't ignore it,it will use floating point number in its line drawing algorithm(may be dda,i don't know exactly).

Here is the example :: http://jsfiddle.net/parth1403/xt7dN/2/

Upvotes: 0

Related Questions