Matt Kelly Matt Kelly - 20 days ago 12
Javascript Question

Javascript Canvas - Draw Line not drawing

I'm having trouble with a Javascript game I'm writing. I have an HTML canvas which I am drawing on with Javascript.

I am trying to recreate an airport, so I have drawn some runways (rectangles) and also drawn a waypoint (also a rectangle) that sits

x
amount of pixels from the arrival end of the runway. I want to draw a line connecting the runway and the waypoint.

My code to do so is below. Note that my runways are stored in an array of
Runway
objects, where
topLeft
is the top left corner of the runway, with an x and y value,
wayPointTopLeft
is the top left corner of the associated waypoint, also with an x and y value,
wayPointWidthHeight
is the width/height of my waypoint rectangle shape (which is drawn as a square).

for (i = 0; i < aRunways.length; i++) {
// Runway
ctx.fillStyle = clone(colourBrightGreen);
ctx.lineWidth=1;
ctx.rect(aRunways[i].topLeft.x,aRunways[i].topLeft.y,aRunways[i].width,aRunways[i].height);
ctx.fill();

// Waypoint
if(aRunways[i].name == "25") {
console.log(aRunways[i].topLeft.y + (aRunways[i].height / 2));
console.log(aRunways[i].wayPointTopLeft.y + (aRunways[i].wayPointWidthHeight / 2));
}

ctx.rect(aRunways[i].wayPointTopLeft.x, aRunways[i].wayPointTopLeft.y, aRunways[i].wayPointWidthHeight, aRunways[i].wayPointWidthHeight);
ctx.strokeStyle = colourBrightGreen;
ctx.lineWidth=4;
ctx.stroke();

// Name
var textX = 0;
var textY = 0;

ctx.font = "12px Arial";
textX = aRunways[i].wayPointTopLeft.x + (aRunways[i].wayPointWidthHeight / 2) - (getTextWidth(aRunways[i].name, ctx.font) / 2);
textY = (aRunways[i].wayPointTopLeft.y + aRunways[i].wayPointWidthHeight + 17);
ctx.fillStyle = clone(colourBrightGreen);

ctx.fillText(aRunways[i].name, textX, textY);

// Line
ctx.lineWidth = 1;
ctx.fillStyle = clone(colourBrightGreen);
ctx.beginPath();
ctx.moveTo((aRunways[i].topLeft.x + (aRunways[i].width / 2)), (aRunways[i].topLeft.y + (aRunways[i].height / 2)));
ctx.lineTo((aRunways[i].wayPointTopLeft.x + (aRunways[i].wayPointWidthHeight / 2)), (aRunways[i].wayPointTopLeft.y + (aRunways[i].wayPointWidthHeight / 2)));
ctx.closePath();
ctx.fill();
}


This works fine for vertically oriented runways, but I have a horizontal runway and the line isn't being drawn. This is what is being drawn:
Output

You'll notice I have some code to check if the runway name is
25
. This is my horizontal runway. The values outputted in the console for the two y values I'm testing is 292.5, which makes sense, they should both be the same seeing as its a horizontal line. If I change those console log lines to output the associated x values, I get
313
for the runway's x value and
395.5
for the waypoint. Again, this is correct.

Why is it that I can't draw a line from (313, 292.5) to (395.5, 292.5)?

Answer

For your final line, use .stroke() instead of .closePath() and .fill()

It looks from here like you're creating a degenerate empty box, and then asking for it to be filled, when you should just be drawing a line.