Some of my arrows only get their arrowhead drawn, the rest is missing!

[dinosaur96m]

What's the problem you're trying to solve?

only one of 3 arrows (loadedArrow) is drawn fully when I load my webpage, the other 2 only have their heads drawn only and no shaft appears (arrow225 and arrow 315)

Post any code you think might be relevant (one fenced block per file)

const loadedArrowXy= [(game.width / 2), (game.height - 1), (game.width / 2), (game.height - 28)]
console.log(loadedArrowXy)
const loadedArrow =  new Arrow(loadedArrowXy[0],loadedArrowXy[1],loadedArrowXy[2], loadedArrowXy[3])
//*break in code*//
//*x1, y1, x2, y2, are calculated using sin, cos, and radius (arrow-shaft height)*//
const arrow225 = new Arrow (loadedArrow[0], loadedArrow[1], x1, y1)
const arrow315 = new Arrow (loadedArrow[0], loadedArrow[1], x2, y2)

//*break*//

////Draw Arrows
///////////////////////////
const drawShaft = (xBase, yBase, xTip, yTip) => {
    console.log('drawing shaft!!')
    ctx.lineWidth = 3
    ctx.beginPath()
    ctx.moveTo(xBase, yBase)
    ctx.lineTo(xTip, yTip)
    ctx.strokeStyle = "black"
    // "#652A0E"
    ctx.stroke()
    ctx.closePath()
}

const drawHead = (xTip,yTip) => {
    ctx.lineWidth = 1
    ctx.beginPath()
    //draw a triangle
    ctx.moveTo(xTip, yTip - 2)
    ///////////^^^^^^^^^^^^^^//////////////////TRACK THE ABOVE COORDINATE for BULLSEYE
    ctx.lineTo((xTip + 2), (yTip + 2))
    ctx.lineTo((xTip - 2), (yTip + 2))
    ctx.strokeStyle = "black"
    ctx.stroke()
    ctx.fillStyle = "black"
    ctx.fill()
    ctx.closePath()
}

//call prior funcitons to put arrow together
const drawArrow = (xBase, yBase, xTip, yTip) => {
    drawShaft(xBase, yBase, xTip, yTip)
    drawHead(xTip,yTip)
}

//*break*//

//Class for generating new arrows
function Arrow (xBase, yBase, xTip, yTip) {
    this.xBase = xBase
    this.yBase = yBase
    this.xTip = xTip
    this.yTip = yTip
    //then declare same type of render method
    this.render = function () {
        drawArrow(xBase, yBase, xTip, yTip)
    }
}

//*break*//

window.addEventListener('DOMContentLoaded', (e) => {
    console.log("Hello HTML")
    ///test
    arrow225.render()
    arrow315.render()
    //render fresh game 
    theBow.render()
    loadedArrow.render()
//*break*//
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

When a l load my webpage, loadedArrow is dawn correctly with the arrowhead and shaft in the correct places. However arrow225 and arrow315 have their heads drawn only, with no shaft rendered for either. The heads are drawn in the expected place, which makes me believe the coordinates I plugged in when building new Arrows were correct.

What is your best guess as to the source of the problem?

Hmm.. well since I see evidence that my Arrow class and drawArrow() functions work properly, perhaps there is something wrong with the coordinates I'm using, but the arrowheads should be somewhere else or not appear on the page at all if that were the case. My best guess is that I have a typo somewhere since my functions and arguments seem to be demonstrating the expected behavior when working on other parts of my code.

What things have you already tried to solve the problem?

I made sure that I had my parentheses written correctly after every invocation of .render()

I tried commenting out the drawHead function within my drawArrow function, to see if the shaft would appear in that case.

I tried building arrow225 and arrow315 with coordinates I typed in myself as arguments rather than the respective x and y variables, to confirm that my math to get the x and y variables was not causing some kind of error in the rendering.

I tried adjusting the lineWidth and .strokeStyle within my drawShaft function to see if that could make the shafts appear.

I added a console.log('drawing shaft!') to my drawShaft function to make sure that it was invoked (3 times) once for each arrow on the screen.

[timmshinbone]

This is interesting, might be easier for me to see in a 1:1

[timmshinbone]

A very simple mistake fixed by changing how we reference certain values. Thanks console logs!

[dinosaur96m]

Thanks Timm! (and console logs)