In one of my codes, using css to establish width and height for an HTML5 canvas isn't working. Can someone tell me why?

Question

I was trying to use css to scale my canvas to fit on multiple devises, but height won't work(width does). If it works on your devices, I'll know my tablet is glitching, but If it is an error in my code, please tell me. I've looked back at game development with JS multiple times to try to figure this out.
https://code.sololearn.com/W3peEabGy8xC/?ref=app

Answer 1

HiPaxton Programer Placing a canvas within a button may cause issues with rendering, styling, event handling, and accessibility. But to continue to with your example. The properties don't work as intended because the canvas is confined within the button. To resolve this, edit the containing button. Refer to this example.

https://code.sololearn.com/WcNYuq2EbiR4/?ref=app

Answer 2

If you set the width and height in CSS, then remove the same attributes from the HTML canvas tag. Use only one place to define style, so you get a consistent result regardless of browser and device.

Decide if you want to set it in pixels or percentage, use only one of them.
Styling elements in relation to the screen edge or to other elements, can get very tricky. Often another container such as div is used around the canvas to achieve some positioning effect. Mastering this is an art... takes a lot of research and practice, to see what are the commonly used patterns and best practices.

Answer 3

You don't need to set the height for canvas in css. You already set it to be a square in html.
why the canvas inside a button?
why h1 & h2 inside head!

canvas{
width:100%;
background-color:blue;
}

the button should not exceed 100% width
.jump{
padding:2% 0;
width:100%;
}

Answer 4

Thanks for the help

Answer 5

The reason the canvas is inside a button is so you can tap on it to attack. Instead of having two buttons for attack and jump, U tap the screen for attack and tap jump for jump.

Answer 6

Thanks everyone