html5 canvas problem

Question

I tried to make a flappybird game using html5 canvas on javascript but i show nothing(this is only the background) heres my code:

<canvas id="canvas" width="800" height="600" style="border:1px solid #000000"></canvas>
<script>
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

var bebek1 = new Image();
var bg = new Image();
var pipeNorth = new Image();
var pipeSouth = new Image();
var fg = new Image();

bebek1.src = "images/bebek1.png"
bg.src = "images/bg.png"
pipeNorth.src = "images/pipeNorth.png"
pipeSouth.src = "images/pipeSouth.png"
fg.src = "images/fg.png"

var gap = 75;
var constant = pipeNorth.height+gap;

function draw(){
ctx.drawImage(bg,0,0)
ctx.drawImage(pipeNorth,100,0)
ctx.drawImage(pipeSouth,100,0+constant);
}
draw();

</script>

Answer 1

You should put all drawImage() inside a window.onload function to make sure the image has loaded before drawing it to the canvas.

Answer 2

function draw(){
ctx.drawImage(bg,0,0)
ctx.drawImage(pipeNorth,100,0)
ctx.drawImage(pipeSouth,100,0+constant);

requestAnimationFrame(draw);
}

Add requestAnimationFrame(draw); and it must work