Tenho um index.html com o seguinte código:
<!DOCTYPE html>
<html>
<head>
<title> HTML 5 - Airplane Game</title>
<link rel="stylesheet" href="gamestyle.css"/>
</head>
<body>
<canvas id="canvasBg">Your Browser does not support HTML5</canvas>
<script type="text/javascript" src="game.js"></script>
</body>
</html>
E um estilo no meu css:
#canvasBg {
width: 800px;
height: 500px;
display: block;
margin: 100px auto;
background-color: #606060;
}
E eis meu código JS:
var canvas = document.getElementById("canvasBg");
var ctxBg = canvasBg.getContext('2d');
var imgSprite = new Image();
imgSprite.src = "img/sprite.png";
window.addEventListener("load",init,false);
function init() {
ctxBg.drawImage(imgSprite,0,0,1600,500,0,0,1600,500);
}
Imagem a ser utilizada : https://raw.githubusercontent.com/gyrostorm/html5-game-dev-series/gh-pages/images/sprite.png
Gostaria de mostrar apenas o cenário quando chamar a função init
. Por que isso não esta acontecendo?