Using Geolocation - HTML5 Foundations - page 277

3. Now you need to calculate the vertical position of the line. To do this, divide the height of the canvas by 2
and then add 0.5. Initialize a new variable called lineY with the result.
function drawAdvert() {
...
// Add the separator line
var lineLength = 360;
var lineY = (adCanvas.height / 2) + 0.5;
}
Adding 0.5 here will ensure that the line is crisp. If your lines ever appear blurry, it may be because pixels are only
being partially painted. This is caused by the way that lines are drawn on the canvas.
For information on how to fix this issue, check out Mozilla's Canvas documentation here: ht-
tps://developer.mozilla.org/en-US/docs/Canvas_tutorial/Applying_styles_and_colors -
Line_styles .
4. Now call the beginPath() function to create a new empty path.
function drawAdvert() {
...
// Add the separator line
var lineLength = 360;
var lineY = (adCanvas.height / 2) + 0.5;
ctx.beginPath();
}
5. Set the start point of your line using the moveTo() function. The x parameter should be 40 and the y
should use the value of the lineY variable.
function drawAdvert() {
...
// Add the separator line
var lineLength = 360;
var lineY = (adCanvas.height / 2) + 0.5;
ctx.beginPath();
ctx.moveTo(40, lineY);
}
6. Use the lineTo() function to draw the line. The x parameter should be the value of the lineLength
plus 40 (because the starting point of the line is 40 pixels from the left of the canvas). The y parameter
should be the value of the lineY variable.
function drawAdvert() {
...
// Add the separator line
var lineLength = 360;
var lineY = (adCanvas.height / 2) + 0.5;