IEとOperaでは、display: none な画像は、drawImage()で描画されない。

JavaScript canvas

なぜIEとOperaのcanvasは自作のCoverFlowで何も表示されないのかを調べてます。

<html>
<head>
<title>reflect test</title>
<!--[if IE]><script type="text/javascript" src="../lib/excanvas.js"></script><![endif]-->
</head>
<body>
<img id="cover0" src="./cover0.jpg" alt="" style="display: none" />
<canvas id="canvas0" width="240" height="240"></canvas>
<script>
window.onload = function() {
  var img = document.getElementById("cover0");
  var e = document.getElementById("canvas0");
  var ctx = e.getContext("2d");
  ctx.drawImage(img, 0, 0);
}
</script>
</body>
</html>

とすると、IEとOperaのdrawImage()ではcanvasに何も描画されないことが判明しました。
display: none の解釈がブラウザ毎に異なるようです。

「表示したくない画像は、display: none で消さずに、画面の外にふっとばせ!」ということですかね。

<img id="cover0" src="./cover0.jpg" alt="" style="position: absolute; left: -9999px" />

とする事で回避できたけど、スマート成分が足りないね。