+ 1

Canvas Wont Appear

This code works for other Id's, but it won't work for a canvas. code: <canvas id="canvas"></canvas> <button onclick="start()">START GAME</button> <style> canvas { display: none; } </style> <script> function start() { var c = document.getElementById('canvas'); if (c.style.display === 'none') { c.style.display = 'block'; } }

12th Aug 2017, 3:04 PM
❮вαιι–кιηgz❯ dario
❮вαιι–кιηgz❯ dario - avatar
5 Réponses
+ 2
@ChaoticDawg at getPropertyValue() you can change to getComputedStyle(c).display === 'none'
13th Aug 2017, 3:05 AM
Yanothai Chaitawat
Yanothai Chaitawat - avatar
+ 1
.style.display this will display as undefined bc <canvas> didn't hold style attribute with display css property <canvas style="display:none"> ^^^ do .style.display then you will require 'none' More: .style.CSSPropName didn't return the current style of element
12th Aug 2017, 3:35 PM
Yanothai Chaitawat
Yanothai Chaitawat - avatar
+ 1
Can I have a working copy, please?
12th Aug 2017, 4:21 PM
❮вαιι–кιηgz❯ dario
❮вαιι–кιηgz❯ dario - avatar
+ 1
Try this: function start() { var c = document.getElementById('canvas'); if (window.getComputedStyle(c).getPropertyValue("display") === 'none') { c.style.display = 'block'; } } For Internet Explorer use currentStyle instead of getComputedStyle https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle https://developer.mozilla.org/en-US/docs/Web/API/Element/currentStyle https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx You can do a check to see which of the above is supported by using something like: function start() { var c = document.getElementById('canvas'); if (typeof window.getComputedStyle != "undefined") { if (window.getComputedStyle(c).getPropertyValue("display") === 'none') { c.style.display = 'block'; } } else if (c.currentStyle != "undefined") { if (c.currentStyle.display === 'none') { // c.currentStyle.getPropertyValue("display") may also work (or something like this) c.style.display = 'block'; } } }
12th Aug 2017, 5:02 PM
ChaoticDawg
ChaoticDawg - avatar
0
Try giving it a width and height. https://www.w3schools.com/html/html5_canvas.asp
12th Aug 2017, 3:12 PM
ChaoticDawg
ChaoticDawg - avatar