Home > Net >  HTML Canvas and fullscreen problems
HTML Canvas and fullscreen problems

Time:10-03

  • I have been working on an project on github.
  • I am basically trying to make a carrom game with github pages.
  • You can check out my project at here.
  • Well I am just making draw the board on an canvas. As soon a F11 key is pressed everything gets dirty.
  • You can check the code on github here.

Please Help

ThankYou

CodePudding user response:

Your resize code doesn't look like it's actually resizing anything or clearing the screen, it's just drawing a different size board onto the canvas whether it fits or not, you can see this if you make the window tiny and then make it large again, there's a small board drawn in the corner. But why bother resizing at all? You have the canvas set at 550x550 in your index file, just swap the board code in your CSS file to something like the below and it will always be a bit smaller than the maximum size that will fit on the screen (which seems to be what you are going for):

position: absolute;
width: 90vmin;
height: 90vmin;
top: 50%;
left: 50%;
margin-top: -45vmin;
margin-left: -45vmin;
background-color: #caa472;
  • Related