Canvas Wont Appear

Question

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';
}
}

Answer 1

@ChaoticDawg
at getPropertyValue() you can change to
getComputedStyle(c).display === 'none'

Answer 2

.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

Answer 3

Can I have a working copy, please?

Answer 4

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';
}
}
}

Answer 5

Try giving it a width and height.

https://www.w3schools.com/html/html5_canvas.asp