Menu
i have this code :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas{border:#666 1px solid;}
</style>
<script type="text/javascript">
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
playerimage = new Image(),
x = canvas.width / 2, //align to centre of the screen
y = canvas.height / 2, //same as above
speed = 5, //speed for the player to move at
width = 50, //width of the player
height = 50; //height of the player
function init() {
playerimage.src = "ninja.png"; //path to the image to use for the player
canvas.addEventListener("keypress", update);
}
function update(event) {
if (event.keyCode == 38) {
y -= speed; //going up
}
if (event.keyCode == 40) {
y += speed; //going down
}
if (event.keyCode == 37) {
x -= speed; //going left
}
if (event.keyCode == 39) {
x += speed; //going right
}
render();
}
function render() {
// context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(playerimage, x, y, width, height);
}
</script>
</head>
<body onload="init();">
<button onclick="init();">Draw</button>
<canvas id="Mycanvas" width="550" height="400"></canvas>
</body>
</html>
the javascript console always give me canvas is null error
788
There are two problems with the following line of code:
var canvas = document.getElementById("canvas"),
Change it to:
var canvas = document.getElementById("Mycanvas"),
...and move the whole <script> block to the end of the body, just before </body>.
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
