Html5 Canvas - My Lines/arcs Are Not Appearing On Top Of An Image

I have some lines drawn using lineTo() and some arcs using arc(). I would like to draw these shapes I've created with their black-outlines clearly visible on top of a blue/white co

Solution 1:

If the codes for your triangle is outside of the background's onload part, then this might fix it:

blueprint_background.onload = function(){
    //backgroundvar pattern = context.createPattern(this, "repeat");
    context.fillStyle = pattern;
    context.rect(margin_x, margin_y, eff_width, eff_height);
    context.fill();
    draw_triangle();
};

functiondraw_triangle(){                       //seperate function//triangle
    context.beginPath():
    context.moveTo(loc_x, loc_y);
    context.lineTo(loc_x, loc_y + 30);
    context.moveTo(loc_x, loc_y);
    context.lineTo(loc_x + 20, loc_y + 15);
    context.moveTo(loc_x, loc_y + 30);
    context.lineTo(loc_x + 20, loc_y + 15);
    context.stroke(); 
};

It is because your background will have to wait until it loaded, which will result in the background drawing on top of your triangle.