Can't draw canvas

Question

I have a few problem with html5. I created a new webpage and add canvas at the middle of that page.Then created new js file that have a script for canvas and import it to webpage but webpage's canvas still nothing happen.

This is my code. index.html in root folder, style.css in css/ , script.js in js/

 function startnewgame(){ score =0; player.hp =10; timewhenlasthit = Date.now(); timewhengamestart = Date.now(); frameCount =0; enemylist ={} ; bulletlist ={}; upgradelist ={}; randomspwanenemy(); } function update(){ ctx.clearRect(0,0,WIDTH,HEIGHT); ctx.fillText("Score = "+score,200,30); score ++; frameCount++; if(frameCount % 100 === 0)random spwanenemy(); if(frameCount % 75 === 0)randomspwanupgrade(); player.attackcounter += player.atkspd; updateplayerposition(); drawplayer(player); for(var i in bulletlist){ updateplayer(bulletlist[i]); bulletlist[i].timer++; var toRemove = false ; if (bulletlist[i].timer > 100) { toRemove = true; } for (var j in enemylist) { var cod = getdistant(bulletlist[i],enemylist[j]); if(cod){ toRemove = true; delete enemylist[j]; score+=1000; break; } } if(toRemove)delete bulletlist[i]; } for(var i in upgradelist){ updateplayer(upgradelist[i]); var temp = getdistant(player,upgradelist[i]); if(temp){ if(upgradelist[i].type === 'score'){ score += 100; } if(upgradelist[i].type ==='atkspd'){ player.atkspd +=5; } delete upgradelist[i]; } } for(var i in enemylist){ updateplayer(enemylist[i]); var temp = getdistant(player,enemylist[i]); death(temp); } } function drawplayer(x){ ctx.save(); ctx.fillStyle = x.color; ctx.fillRect(xx-x.width/2,xy-x.height/2,x.width,x.height); ctx.restore(); ctx.fillText("HP = "+player.hp,20,30); ctx.fillText("bullet = "+player.attackcounter,20,80); } function drawenemy(x){ ctx.save(); ctx.fillStyle = x.color; ctx.fillRect(xx-x.width/2,xy-x.height/2,x.width,x.height); ctx.restore(); } function updateplayer(x){ if(x.x+x.width/2>=WIDTH){ xx=WIDTH-x.width/2; x.spdX=-x.spdX; } if(xx-x.width/2<=0){ xx = x.width/2; x.spdX=-x.spdX; } if(x.y+x.height/2>=HEIGHT){ xy = HEIGHT-x.height/2; x.spdY=-x.spdY; } if(xy-x.height/2<=0){ xy = x.height/2; x.spdY=-x.spdY; } x.x+=x.spdX; x.y+=x.spdY; drawenemy(x); } function adde(id,x,y,spdX,spdY,width,height){ var earth ={ name:'A', x : x, spdX :spdX, y : y, spdY : spdY, id : id, width : width, height : height, color : 'red' }; enemylist[id]= earth; } function addupgrade(id,x,y,spdX,spdY,width,height,color,type){ var earth ={ name:'A', x : x, spdX :spdX, y : y, spdY : spdY, id : id, width : width, height : height, color : color, type : type }; upgradelist[id]= earth; } function addbullet(id,x,y,spdX,spdY,width,height){ var earth ={ name:'A', x : x, spdX :spdX, y : y, spdY : spdY, id : id, width : width, height : height, color : 'black', timer: 0 }; bulletlist[id]= earth; } function getdistant(earth1,earth2){ var rect1 ={ x:earth1.x-earth1.width/2, y:earth1.y-earth1.height/2, width:earth1.width, height:earth1.height }; var rect2 ={ x:earth2.x-earth2.width/2, y:earth2.y-earth2.height/2, width:earth2.width, height:earth2.height }; return testcol(rect1,rect2); } function death(x){ if(x){ player.hp -= 1; if(player.hp == 0){ var ttime = Date.now() - timewhengamestart; timewhengamestart = Date.now(); console.log("DEAD!! you score "+ score ); startnewgame(); } } } function randomspwanenemy(){ var x = Math.random()*WIDTH; var y = Math.random()*HEIGHT; var height = 10 +Math.random()*30; var width= 10 + Math.random()*30; var spdY = Math.random()*5 +5; var spdX = Math.random()*5 +5; var id = Math.random(); //console.log(x,y,height,width,spdX,spdY); adde(id,x,y,spdX,spdY,width,height); } function randomspwanupgrade(){ var x = Math.random()*WIDTH; var y = Math.random()*HEIGHT; var height = 10 ; var width= 10 ; var spdY = 0; var spdX = 0; var id = Math.random(); var sample = Math.random(); if(sample >0.5){ var type = 'score'; var color ='lightblue'; } else { var type = 'atkspd'; var color = 'purple'; } addupgrade(id,x,y,spdX,spdY,width,height,color,type); } function randomspwanbullet(earth,overangle){ var x = player.x; var y = player.y; var height = 10 ; var width= 10 ; //var tid = pp(Math.random()); var angle = earth.aimAngle; if (overangle !== undefined) { angle = overangle; } var spdY = (Math.sin(angle)*10 ); var spdX = (Math.cos(angle)*10 ); var id = Math.random(); addbullet(id,x,y,spdX,spdY,width,height); } function testcol(earth1,earth2){ var lasthit = Date.now()-timewhenlasthit; if( earth1.x <= earth2.x+earth2.width && earth2.x <= earth1.x+earth1.width && earth1.y <= earth2.y+earth2.height && earth2.y <= earth1.y+earth1.height && lasthit >= 1000) { timewhenlasthit=Date.now(); return 1; } } function pp(x){ if(x>0.5)return 1; else return -1; } var canvas = document.getElementById("ctx") var ctx = canvas.getContext('2d'); var frameCount =0; ctx.font = '30 px Arial'; var score =0 var HEIGHT = 500; var WIDTH = 500; var timewhengamestart = Date.now(); var timewhenlasthit = Date.now(); document.onmousemove = function(mouse){ var mouseX = mouse.clientX- document.getElementById('ctx').getBoundingClientRect().left; var mouseY = mouse.clientY-document.getElementById('ctx').getBoundingClientRect().top;; mouseX -= player.x; mouseY -= player.y; player.aimAngle = Math.atan2(mouseY,mouseX) ; /* if(mouseX <player.width/2)mouseX=player.width/2; if(mouseX>WIDTH-player.width/2)mouseX = WIDTH-player.width/2; if(mouseY<player.height/2)mouseY=player.height/2; if(mouseY>HEIGHT-player.height/2)mouseY = HEIGHT-player.height/2; player.x = mouseX; player.y = mouseY;*/ } document.onclick = function(mouse){ if (player.attackcounter > 25) { randomspwanbullet(player,player.aimAngle); player.attackcounter = 0; } } document.oncontextmenu = function(mouse){ if (player.attackcounter > 1000) { for (var i = 1; i < 361; i++) { randomspwanbullet(player,i); } player.attackcounter = 0; } mouse.preventDefault(); } document.onkeydown = function(event){ if (event.keyCode===68) { player.pressingRight = true; } else if (event.keyCode===83) { player.pressingDown = true ; } else if (event.keyCode===65) { player.pressingLeft = true ; } else if (event.keyCode===87) { player.pressingUp = true ; } } document.onkeyup = function(event){ if (event.keyCode===68) { player.pressingRight = false; } else if (event.keyCode===83) { player.pressingDown = false ; } else if (event.keyCode===65) { player.pressingLeft = false ; } else if (event.keyCode===87) { player.pressingUp = false ; } } function updateplayerposition() { if(player.pressingRight)player.x+=10 if(player.pressingLeft)player.x-=10 if(player.pressingUp)player.y-=10 if(player.pressingDown)player.y+=10 if(player.x <player.width/2)player.x=player.width/2; if(player.x>WIDTH-player.width/2)player.x = WIDTH-player.width/2; if(player.y<player.height/2)player.y=player.height/2; if(player.y>HEIGHT-player.height/2)player.y = HEIGHT-player.height/2; } var player = { name :'E' , x : 40 , spdX : 30 , y : 40 , spdY : 5 , hp : 10 , width : 20 , height : 20, atkspd : 1, color : 'green', attackcounter : 0, pressingDown : false, pressingUp : false, pressingLeft : false, pressingRight : false, aimAngle : 0 }; var enemylist ={}; var upgradelist = {}; var bulletlist = {}; function drawCanvas() { startnewgame(); setInterval(update,40); } 

 #header{ background: #202020 ; font-size: 36px; text-align: center; padding:0; margin: 0; font-style: italic; color: #FFFFFF; } #ctx{ border: 2px solid #000000; margin-left: auto; margin-right: auto; left: 0; right: 0; margin-top: 20px; position: absolute; background: #ffffff; } #leftmenu{ margin-top: 20px; margin-bottom: 65px; padding-right: 10px; float: left; width: 300px; height: 580px; background: #C8C8C8; border-radius: 10px; border: 10px solid #002699; } nav#leftmenu h2{ text-align: center; font-size: 30px; } nav#leftmenu ul{ list-style: none; padding: 0; } nav#leftmenu li{ list-style: none; font-size: 24px; margin-top: 20px; border-bottom: 2px dashed #000; margin-left: 0px; text-align: center; } nav#leftmenu a{ text-decoration: none; font-weight: bold; color: #1c478e; } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>A Awesome Game</title> <link href="css/style.css" rel="stylesheet"> <script src="js/script.js" type="text/javascript"></script> </head> <body onload="drawCanvas();" style="background: linear-gradient(to bottom left, #0000ff -10%, #33ccff 100%);"> <h1 id="header">Welcome to my GAME!!</h1> <!--Canvas--> <canvas id ="ctx" width ="800" height="600" style = "border:1px solid #000000;"></canvas> <!--leftMenu--> <section> <nav id="leftmenu"> <h2>Menu</h2> <ul> <li><a href="#" onclick="startnewgame();">New Game</a></li> <li><a href="#">Pause Game</a></li> <li><a href="#">Option</a></li> <li><a href="#" onclick="alert('Game End')">End it now</a></li> </ul> </nav> </section> </body> </html> 

Ps. this ti my first post,Sorry if I did something wrong.

Edit: canvas id from canvas to ctx

Answer 1

Here's a snippet that's working and drawing correctly. It was just a little typo in the update function, writing it like:

    if (frameCount % 100 === 0) random
spwanenemy();

instead of:

    if (frameCount % 100 === 0) randomspwanenemy();

So, yea, just a little typo! Understanding errors from the developer console (F12) and spotting what's wrong is a vital skill. Keep practicing!

 function startnewgame() { score = 0; player.hp = 10; timewhenlasthit = Date.now(); timewhengamestart = Date.now(); frameCount = 0; enemylist = {}; bulletlist = {}; upgradelist = {}; randomspwanenemy(); } function update() { ctx.clearRect(0, 0, WIDTH, HEIGHT); ctx.fillText("Score = " + score, 200, 30); score++; frameCount++; if (frameCount % 100 === 0) randomspwanenemy(); if (frameCount % 75 === 0) randomspwanupgrade(); player.attackcounter += player.atkspd; updateplayerposition(); drawplayer(player); for (var i in bulletlist) { updateplayer(bulletlist[i]); bulletlist[i].timer++; var toRemove = false; if (bulletlist[i].timer > 100) { toRemove = true; } for (var j in enemylist) { var cod = getdistant(bulletlist[i], enemylist[j]); if (cod) { toRemove = true; delete enemylist[j]; score += 1000; break; } } if (toRemove) delete bulletlist[i]; } for (var i in upgradelist) { updateplayer(upgradelist[i]); var temp = getdistant(player, upgradelist[i]); if (temp) { if (upgradelist[i].type === 'score') { score += 100; } if (upgradelist[i].type === 'atkspd') { player.atkspd += 5; } delete upgradelist[i]; } } for (var i in enemylist) { updateplayer(enemylist[i]); var temp = getdistant(player, enemylist[i]); death(temp); } } function drawplayer(x) { ctx.save(); ctx.fillStyle = x.color; ctx.fillRect(xx - x.width / 2, xy - x.height / 2, x.width, x.height); ctx.restore(); ctx.fillText("HP = " + player.hp, 20, 30); ctx.fillText("bullet = " + player.attackcounter, 20, 80); } function drawenemy(x) { ctx.save(); ctx.fillStyle = x.color; ctx.fillRect(xx - x.width / 2, xy - x.height / 2, x.width, x.height); ctx.restore(); } function updateplayer(x) { if (xx + x.width / 2 >= WIDTH) { xx = WIDTH - x.width / 2; x.spdX = -x.spdX; } if (xx - x.width / 2 <= 0) { xx = x.width / 2; x.spdX = -x.spdX; } if (xy + x.height / 2 >= HEIGHT) { xy = HEIGHT - x.height / 2; x.spdY = -x.spdY; } if (xy - x.height / 2 <= 0) { xy = x.height / 2; x.spdY = -x.spdY; } xx += x.spdX; xy += x.spdY; drawenemy(x); } function adde(id, x, y, spdX, spdY, width, height) { var earth = { name: 'A', x: x, spdX: spdX, y: y, spdY: spdY, id: id, width: width, height: height, color: 'red' }; enemylist[id] = earth; } function addupgrade(id, x, y, spdX, spdY, width, height, color, type) { var earth = { name: 'A', x: x, spdX: spdX, y: y, spdY: spdY, id: id, width: width, height: height, color: color, type: type }; upgradelist[id] = earth; } function addbullet(id, x, y, spdX, spdY, width, height) { var earth = { name: 'A', x: x, spdX: spdX, y: y, spdY: spdY, id: id, width: width, height: height, color: 'black', timer: 0 }; bulletlist[id] = earth; } function getdistant(earth1, earth2) { var rect1 = { x: earth1.x - earth1.width / 2, y: earth1.y - earth1.height / 2, width: earth1.width, height: earth1.height }; var rect2 = { x: earth2.x - earth2.width / 2, y: earth2.y - earth2.height / 2, width: earth2.width, height: earth2.height }; return testcol(rect1, rect2); } function death(x) { if (x) { player.hp -= 1; if (player.hp == 0) { var ttime = Date.now() - timewhengamestart; timewhengamestart = Date.now(); console.log("DEAD!! you score " + score); startnewgame(); } } } function randomspwanenemy() { var x = Math.random() * WIDTH; var y = Math.random() * HEIGHT; var height = 10 + Math.random() * 30; var width = 10 + Math.random() * 30; var spdY = Math.random() * 5 + 5; var spdX = Math.random() * 5 + 5; var id = Math.random(); //console.log(x,y,height,width,spdX,spdY); adde(id, x, y, spdX, spdY, width, height); } function randomspwanupgrade() { var x = Math.random() * WIDTH; var y = Math.random() * HEIGHT; var height = 10; var width = 10; var spdY = 0; var spdX = 0; var id = Math.random(); var sample = Math.random(); if (sample > 0.5) { var type = 'score'; var color = 'lightblue'; } else { var type = 'atkspd'; var color = 'purple'; } addupgrade(id, x, y, spdX, spdY, width, height, color, type); } function randomspwanbullet(earth, overangle) { var x = player.x; var y = player.y; var height = 10; var width = 10; //var tid = pp(Math.random()); var angle = earth.aimAngle; if (overangle !== undefined) { angle = overangle; } var spdY = (Math.sin(angle) * 10); var spdX = (Math.cos(angle) * 10); var id = Math.random(); addbullet(id, x, y, spdX, spdY, width, height); } function testcol(earth1, earth2) { var lasthit = Date.now() - timewhenlasthit; if (earth1.x <= earth2.x + earth2.width && earth2.x <= earth1.x + earth1.width && earth1.y <= earth2.y + earth2.height && earth2.y <= earth1.y + earth1.height && lasthit >= 1000) { timewhenlasthit = Date.now(); return 1; } } function pp(x) { if (x > 0.5) return 1; else return -1; } var canvas = document.getElementById("ctx") var ctx = canvas.getContext('2d'); var frameCount = 0; ctx.font = '30 px Arial'; var score = 0 var HEIGHT = 500; var WIDTH = 500; var timewhengamestart = Date.now(); var timewhenlasthit = Date.now(); document.onmousemove = function(mouse) { var mouseX = mouse.clientX - document.getElementById('ctx').getBoundingClientRect().left; var mouseY = mouse.clientY - document.getElementById('ctx').getBoundingClientRect().top;; mouseX -= player.x; mouseY -= player.y; player.aimAngle = Math.atan2(mouseY, mouseX); /* if(mouseX <player.width/2)mouseX=player.width/2; if(mouseX>WIDTH-player.width/2)mouseX = WIDTH-player.width/2; if(mouseY<player.height/2)mouseY=player.height/2; if(mouseY>HEIGHT-player.height/2)mouseY = HEIGHT-player.height/2; player.x = mouseX; player.y = mouseY;*/ } document.onclick = function(mouse) { if (player.attackcounter > 25) { randomspwanbullet(player, player.aimAngle); player.attackcounter = 0; } } document.oncontextmenu = function(mouse) { if (player.attackcounter > 1000) { for (var i = 1; i < 361; i++) { randomspwanbullet(player, i); } player.attackcounter = 0; } mouse.preventDefault(); } document.onkeydown = function(event) { if (event.keyCode === 68) { player.pressingRight = true; } else if (event.keyCode === 83) { player.pressingDown = true; } else if (event.keyCode === 65) { player.pressingLeft = true; } else if (event.keyCode === 87) { player.pressingUp = true; } } document.onkeyup = function(event) { if (event.keyCode === 68) { player.pressingRight = false; } else if (event.keyCode === 83) { player.pressingDown = false; } else if (event.keyCode === 65) { player.pressingLeft = false; } else if (event.keyCode === 87) { player.pressingUp = false; } } function updateplayerposition() { if (player.pressingRight) player.x += 10 if (player.pressingLeft) player.x -= 10 if (player.pressingUp) player.y -= 10 if (player.pressingDown) player.y += 10 if (player.x < player.width / 2) player.x = player.width / 2; if (player.x > WIDTH - player.width / 2) player.x = WIDTH - player.width / 2; if (player.y < player.height / 2) player.y = player.height / 2; if (player.y > HEIGHT - player.height / 2) player.y = HEIGHT - player.height / 2; } var player = { name: 'E', x: 40, spdX: 30, y: 40, spdY: 5, hp: 10, width: 20, height: 20, atkspd: 1, color: 'green', attackcounter: 0, pressingDown: false, pressingUp: false, pressingLeft: false, pressingRight: false, aimAngle: 0 }; var enemylist = {}; var upgradelist = {}; var bulletlist = {}; function drawCanvas() { startnewgame(); setInterval(update, 40); } 

 #header { background: #202020; font-size: 36px; text-align: center; padding: 0; margin: 0; font-style: italic; color: #FFFFFF; } #ctx { border: 2px solid #000000; margin-left: auto; margin-right: auto; left: 0; right: 0; margin-top: 20px; position: absolute; background: #ffffff; } #leftmenu { margin-top: 20px; margin-bottom: 65px; padding-right: 10px; float: left; width: 300px; height: 580px; background: #C8C8C8; border-radius: 10px; border: 10px solid #002699; } nav#leftmenu h2 { text-align: center; font-size: 30px; } nav#leftmenu ul { list-style: none; padding: 0; } nav#leftmenu li { list-style: none; font-size: 24px; margin-top: 20px; border-bottom: 2px dashed #000; margin-left: 0px; text-align: center; } nav#leftmenu a { text-decoration: none; font-weight: bold; color: #1c478e; } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>A Awesome Game</title> <link href="css/style.css" rel="stylesheet"> <script src="js/script.js" type="text/javascript"></script> </head> <body onload="drawCanvas();" style="background: linear-gradient(to bottom left, #0000ff -10%, #33ccff 100%);"> <h1 id="header">Welcome to my GAME!!</h1> <!--Canvas--> <canvas id="ctx" width="800" height="600" style="border:1px solid #000000;"></canvas> <!--leftMenu--> <section> <nav id="leftmenu"> <h2>Menu</h2> <ul> <li><a href="#" onclick="startnewgame();">New Game</a> </li> <li><a href="#">Pause Game</a> </li> <li><a href="#">Option</a> </li> <li><a href="#" onclick="alert('Game End')">End it now</a> </li> </ul> </nav> </section> </body> </html>