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

animation, canvas, html, html5-canvas, javascript

Solution

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

Problem

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(); } ```

Original source