canvas vs div text print

Benchmark created on

Preparation HTML

<canvas id="canvas"></canvas>
<div id="div" style="height: 500px; overflow: auto; width: 400px"></div>
<div id="div2" style="height: 500px; overflow: auto; width: 400px"></div>

Setup

var text = "test text";
    var canvas = document.getElementById("canvas");
    var div = document.getElementById("div");
    var div2 = document.getElementById("div2");
    div.innerHTML = "";
    div2.innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
canvas
var context = canvas.getContext("2d");
for(var n = 0; n < 10; n++) {
   context.font = "italic 30pt Arial";
   context.fillText(text, 10, 10);
}
ready
div
for(var n = 0; n < 10; n++) {
   var cntx = document.createElement("DIV");
   cntx.style.fontFamily = "Arial";
   cntx.style.fontSize = "30pt";
   cntx.style.fontStyle = "italic";
   cntx.innerHTML = text;
   div.appendChild(cntx);
}
ready
div-2
var res = "";
for(var n = 0; n < 10; n++) {
   res += "<div style=\"font-family: Arial; font-size: 30pt; font-style: italic\">";
   res += text;
   res += "</div>";
}
div2.innerHTML = res;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.