Холст HTML5 - Как нарисовать линию на фоне изображения?

Я пытаюсь нарисовать линию поверх фона изображения — в HTML5 Canvas. Однако всегда линия рисуется за изображением. На самом деле сначала рисуется линия, а затем рисуются картинки — независимо от того, как я вызываю функции.

Как вывести линию вверху изображения?

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();
}
14
задан geeky_monster 16 May 2012 в 17:33
поделиться