HTML5 Canvas - How to Draw a line over an image background?

Question

I am trying to draw a line on top of an image background - in an HTML5 Canvas . However always the line gets drawn behind the image . Actually the line gets drawn first and then the pictures get drawn - irrespective of how I call the functions.

How do I bring the line to the top of the image ?

var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
            context.clearRect(0, 0, canvas.width, canvas.height);
drawbackground(canvas, context); 
drawlines(canvas, context); 


function drawbackground(canvas, context){

    var imagePaper = new Image();


        imagePaper.onload = function(){


            context.drawImage(imagePaper,100, 20, 500,500);
        };

      imagePaper.src = "images/main_timerand3papers.png";
}



function drawlines(canvas, context){


            context.beginPath();
            context.moveTo(188, 130);
            context.bezierCurveTo(140, 10, 388, 10, 388, 170);
            context.lineWidth = 10;
            // line color
            context.strokeStyle = "black";
            context.stroke();
}

score 20 · Accepted Answer · answered May 16 '12 at 17:38

20

Totally untested code, but did you tried something like this?

function drawbackground(canvas, context, onload){

    var imagePaper = new Image();


        imagePaper.onload = function(){


            context.drawImage(imagePaper,100, 20, 500,500);
            onload(canvas, context);
        };

      imagePaper.src = "images/main_timerand3papers.png";
}

and then call the method like this...

 drawbackground(canvas, context, drawlines);

answered May 16 '12 at 17:38

Chango

6,754
1
28
37

Should the last line be drawbackground(canvas, context, drawlines(canvas,context)); ? – geeky_monster May 16 '12 at 17:42
2

No, because in that case you would be calling the method 'drawlines' and then using its return value as a parameter. – Chango May 16 '12 at 17:43

Sam · Answer 2 · 2012-05-16T18:00:55.017

7

Change your image onload to something like this:

imagePaper.onload = function () {
    context.drawImage( imagePaper, 100, 20, 500, 500 );
    drawLines( canvas, context );
};

Then make sure you remove the earlier call to drawLines.

The important take away to this solution, is that the onload function will be executed sometime in the future, whereas the drawLines function is executed immediately. You must always be careful of how you structure your callbacks, especially when nesting them.

edited May 16 '12 at 18:00

answered May 16 '12 at 17:46

Sam

2,579
17
27

this answer deserves more upvotes as it answers with explanation – Humoyun Ahmad Feb 17 '19 at 12:10

score 7 · Answer 3 · answered May 16 '12 at 18:47

7

To be more efficient, assuming you are going to be doing multiple redraws of this line or lines, would be to set the CSS background-image of the canvas to be your image.

<canvas style="background-image:url('images/main_timerand3papers.png');"></canvas>

answered May 16 '12 at 18:47

Simon Sarris

62,212
13
141
171

Thanks Simon . But I need to do some dynamic changes to the background as well . Hence I am not using CSS properties . – geeky_monster May 16 '12 at 20:18

aIKid · Answer 4 · 2014-10-01T03:31:11.330

4

Or you can try this:

drawbackground(canvas, context);
context.globalCompositeOperation = 'destination-atop';
drawlines(canvas, context);

edited Oct 01 '14 at 03:31

answered Feb 26 '13 at 08:54

aIKid

26,968
4
39
65

HTML5 Canvas - How to Draw a line over an image background?

4 Answers4

Linked