Question

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 coloured background that I have. It’s pretty light so I know that the black will show. But it doesn’t.

I used the canvas itself to place the background image, is this wrong? Here’s the relevant code:

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

And my beautiful shape:

//the three sides of the triangle
context.beginPath();
context.moveTo(loc_x, loc_y);
context.lineTo(loc_x, loc_y + 30); //vertical downwards
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); //go the other way to complete the triangle
context.stroke(); 

By the way if anybody wants to call be out on bad practices for drawing shapes using canvas, go for it before it becomes habit. For example I’m wondering after I call stroke() if I should call a closePath() method or something.

But yeah my main issue is that I can’t see the black lines on top of my image background.

Thanks for any help.

Answer 1

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

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

function draw_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.