latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

innerHTML clears the drawing canvas pixels.

Canvas に描画した内容は、innerHTML を使った Nodeツリーへの干渉により描画内容がリセットされ消えてしまいます(in Chrome, Safari, Firefox)

useInnerHTML = false にすると消えません。

<body>
<canvas></canvas>
<img src="foo.png"></img>
</body>

var useInnerHTML = true;

window.onload = function() {
    var ctx = document.querySelector("canvas").getContext("2d");
    ctx.drawImage(document.querySelector("img"), 0, 0);

    if (useInnerHTML) {
        document.body.innerHTML += "<p>hello</p>";
    } else {
        var p = document.createElement("p");
        var text = document.createTextNode("hello");
        p.appendChild(text);
        document.body.appendChild(p);
    }
}