A canvas styled with visibility: hidden; is supposed to appear window-sized after one second with this code, right?

var canvas = document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// draw on canvas.getContext("2d") ...
window.setTimeout(function() {
  canvas.style.visibility = "visible";
}, 1000);

It works with IE11, but not with Chrome32 (running on Windows7).
(Phew, I never though I would find something that works with IE but not with Chrome!)

I tried using display: none; and canvas.style.display= "block"; to hide and show the canvas and got the same behavior.

Here is a test: /

Oddly, in jsfiddle with Chrome, the canvas (and its drawn content) appears after you move the mouse over the document area (after the function triggered by setTimeout is called, of course). But it never appears if the same HTML+CSS+JS code runs in a single Chrome tab/window (unless you open "Development tools" through "Inspect element", or click on the document area).

What am I missing here? I tried to reduce the code to the minimum of my original scenario.

A canvas styled with visibility: hidden; is supposed to appear window-sized after one second with this code, right?

var canvas = document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// draw on canvas.getContext("2d") ...
window.setTimeout(function() {
  canvas.style.visibility = "visible";
}, 1000);

It works with IE11, but not with Chrome32 (running on Windows7).
(Phew, I never though I would find something that works with IE but not with Chrome!)

I tried using display: none; and canvas.style.display= "block"; to hide and show the canvas and got the same behavior.

Here is a test: http://jsfiddle/CX49R/

Oddly, in jsfiddle with Chrome, the canvas (and its drawn content) appears after you move the mouse over the document area (after the function triggered by setTimeout is called, of course). But it never appears if the same HTML+CSS+JS code runs in a single Chrome tab/window (unless you open "Development tools" through "Inspect element", or click on the document area).

What am I missing here? I tried to reduce the code to the minimum of my original scenario.

• javascript
• google-chrome
• canvas

• on mac, in chrome it works fine. Maybe try z-index: -1 then change it to 0 after a second – Huangism Commented Feb 5, 2014 at 20:09
• You're not doing anything wrong, it's definitely Chrome acting up. Using display instead of visibility did solve it for me though jsfiddle. – Strille Commented Feb 5, 2014 at 20:23
• @Strille, it did not work for me outside of jsfiddle, and without using jQuery. It works with jQuery on Windows7, but not on Chrome running in my Nexus 4/Android 4.4.2 – ericbn Commented Feb 5, 2014 at 20:35
• @Huangism, just tried with z-index too. Same thing, nothing happens. It seems something is preventing Chrome from refreshing the screen. – ericbn Commented Feb 5, 2014 at 20:38

2 Answers 2

It seems like it's somehow related to the canvas element. Creating a hidden parent div and showing that instead of the canvas element seems to solve the issue:

http://jsfiddle/CX49R/2/

<div id="wrapper">
   <canvas id="myCanvas">Your browser does not support canvas.</canvas>
</div>

I don't have enough reputation to ment, so I'll give you an answer instead. The issue is not the setTimeout, the issue is with canvas.style.visibility = "visible";. I set up an alert in your timeout and it fired after a second, no problem. My only guess is that canvas.style.visibility is waiting on a mouse event to trigger itself.