How do you get <canvas> to apply code?


#1

I have the code ready I just need how do i get it/to it


#2

Hey @tagplayer56196,
To run your code, you should be able to hit “Run”. Perhaps a screenshot would help clarify it a bit more.

  1. Which course are you doing? Just to clarify…

#3

im making a simple 1 player ping pong where you breack blocks type game but i don’t know how to get “”


#4

How to get?? I am not sure what you mean by this…


#5

< canvas > jdfjfdjfjjdfj


#6

ignore the jibberish


#7

What language are you using? HTML/CSS, JavaScript, Python??


#8

Html some jibberish lala


#9

sorry about the randomness it has a minimun of 20 letters soo…


#10

Its fine, i know what you mean…


#11

can I see your code in the editor?


#12

a simple MDN Breakout game written entirely in pure JavaScript and rendered on HTML5 .


#13

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.


#14
Gamedev Canvas Workshop * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }

function draw() { // drawing code } setInterval(draw, 10); ctx.beginPath(); ctx.arc(50, 50, 10, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); var x = canvas.width/2; var y = canvas.height-30; function draw() { ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } var dx = 2; var dy = -2; function draw() { ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); x += dx; y += dy; } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); x += dx; y += dy; } function drawBall() { ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); }

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
x += dx;
y += dy;
}


#15

Use this: validator.w3.org, paste your code and it will tell you that your doctype is HTML 4.01 Transitional. It will give you a few other messages as well.


#16

It won’t let me reply so IMA just edit this


#17

No problem, Glad to help! :smile: Let me know when I can play the game :wink:


#18

ok I shure will :sunglasses: lol