+ 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

19th Dec 2022, 3:57 AM
Mark Niles
Mark Niles - avatar
5 odpowiedzi
+ 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
Chris Coder - avatar
+ 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
Chris Coder - avatar
+ 1
you are welcome 😁
19th Dec 2022, 9:36 AM
Chris Coder
Chris Coder - avatar
0
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
Mark Niles - avatar
0
Oh my good, sweet, baby duck that did it, THANK YOU!
19th Dec 2022, 8:53 AM
Mark Niles
Mark Niles - avatar