Canvas blocks buttons
In my game, I want my buttons on the left and the canvas on the right. However, when I use the align="left", it doesn't work. My code is below. Could anyone tell me how to fix it? <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <style>body>{margin:0:}</style> <canvas id='ltpcanvas'></canvas> <button align="left" onclick="Func1()">Hunger</button> <p id="hunger"> 0 </p> <button align="left" onclick="Func2()">Hygiene</button> <p id="hygiene"> 0 </p> <script> ///////////////////////CANVAS FIT///////////////////////////// window.onload = function(){ init(); window.addEventListener('resize', init,false); } function init(){ var ltpc = document.getElementById('ltpcanvas'); var context = ltpc.getContext('2d'); var myWidth = window.innerWidth -100; var myHeight = window.innerHeight -100; context.canvas.width = myWidth; context.canvas.height = myHeight; context.fillStyle = "#FF0000"; context.fillRect(0,0,myWidth,myHeight); } ///////////////////////////////////////////////////////////// var countHu = 0; function Func1() { document.getElementById('hunger').innerHTML =++countHu; } ///////////////////////////////////////////////////// var countHy = 0; function Func2() { document.getElementById('hygiene').innerHTML =++countHy; } </script> </body> </html>
Often have questions like this?
Learn more efficiently, for free:
