Matt Kelly Matt Kelly - 3 months ago 29
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

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
objects, where
is the top left corner of the runway, with an x and y value,
is the top left corner of the associated waypoint, also with an x and y value,
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);

// 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;

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

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:

You'll notice I have some code to check if the runway name is
. 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
for the runway's x value and
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)?


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.