Canvas vs Div text measure (v2)

Revision 2 of this benchmark created by Olga on

Preparation HTML

<canvas id="canvas"></canvas>
<div id="div"></div>

Setup

var text = "Сначала мы разбиваем текст";

Test runner

Ready to run.

Testing in
TestOps/sec
Canvas
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = "italic 30pt Arial";
var measure = context.measureText(text);
var width = measure.width;
var height = measure.height;
ready
Div
var div = document.getElementById("div");
div.style.fontFamily = "Arial";
div.style.fontSize = "30pt";
div.style.fontStyle = "italic";
div.innerHTML = text;
var width = div.offsetWidth;
var height = div.offsetHeight;
ready

Revisions

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