var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeUp = new Image();
var pipeBottom = new Image();
bird.src = "img/flappy_bird_bird.png";
bg.src = "img/flappt_bird_bg.png";
fg.src = "img/flappy_bird_fg.png";
pipeUp.src = "img/flappy_bird_pipeUp.png";
pipeBottom.src = "img/flapy_bird_pipeBottom.png";
var gap = 90;
function draw() {
ctx.drawImage(bg, 0, 0);
ctx.drawImage(pipeUp, 100, 0);
ctx.drawImage(pipeBottom, 100, 0 + pipeUp.height + gap);
}
pipeBottom.onload = draw;
вот должно уже выводить изображение на экран но ничего не происходит.
а это html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flappy Bird!</title>
</head>
<body>
<canvas id="canvas" width="288" height="512"></canvas>
<script src="js/game.js"></script>
</body>
</html>
