+ 1

Problems getting Canvas Tag working-SOLVED

I am working my way through the intro to game making. My outputs do NOT look like the example, but as far as I can tell, I have no errors in my code. Running on Android. The code: <html> <h1 align="center">My Jumper Game</h1> <p align="center">A fun flappy-bird like game.</p> <canvas id="canvas", width=600 height=400>Your Browser does not support the HTML 5 Canvas Tag</canvas> <br></br> <button id="jump">Jump</button> </html> CSS body{ background-color:#c3c3c3; } h1{ color:#4c6ebb; #canvas { width:100%; background-color:#000000; } JAVASCRIPT window.onload=function(){ let btn=document.getElementById("jump"); let count=0 btn.onclick=function(){ count+=1; console.log(count); } } window.onload=function(){ var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var x=300; var y=350; context.arc(x,y,50,2*Math.PI,true); context.fillStyle="red"; context.fill(); } Not sure what I'm doing wrong, but all I get is sm

css javascript canvas

19th Dec 2022, 3:57 AM

Mark Niles

5 Answers

+ 1

It would be better to save your document in the playground then share here. But from what I can see you forgot to close the h1 style. h1 { color: #4c6ebb; } < --- Missing #canvas {}

19th Dec 2022, 5:38 AM

Chris Coder

+ 1

For your red ball, in your JS. Try this context.arc( x, y, 50, 0, Math.PI *2, true);

19th Dec 2022, 5:47 AM

Chris Coder

+ 1

you are welcome 😁

19th Dec 2022, 9:36 AM

Chris Coder

I'm not sure what I'm doing wrong, but I don't get the black canvas box like I'm supposed to, and the red circle is just a small sliver of red on the bottom right corner

19th Dec 2022, 3:59 AM

Mark Niles

Oh my good, sweet, baby duck that did it, THANK YOU!

19th Dec 2022, 8:53 AM

Mark Niles