Many polygons vs. big polygon

Benchmark created by Jasper on

Preparation HTML

<table>
<tr><td>Canvas</td><td>SVG</td></tr>
<tr><td><canvas id="canvasEl" width="441" height="441"></canvas></td><td><span id="svgWrapper"><svg id="svgEl" xmlns="http://www.w3.org/2000/svg" width="441px" height="441px" viewBox="0 0 441 441"></svg></span></td></tr>
</table>

Setup

var canvas = document.getElementById("canvasEl");
    var svg = document.getElementById("svgEl");
    var svgWrapper = document.getElementById("svgWrapper");
    var svgNS = "http://www.w3.org/2000/svg";
    
    var width = 20, height = 20;
    var glyphRadius = 10;
    var padding = 1;
    var vbWidth = width*2*(glyphRadius+padding) + padding;
    var vbHeight = height*2*(glyphRadius+padding) + padding;
    var context = canvas.getContext("2d");
    
    function clearChildren(parent) {
        var el = parent.firstChild;
        while (el) {
            var next = el.nextSibling;
            parent.removeChild(el);
            el = next;
        }
    }
    
    var coef = glyphRadius/3.62;
    var glyphDef = [2.,2.361701072011516,2.7392021201364227,3.0893754959546955,
       3.3722156039498232,3.555409345132316,3.6180277305584054,
       3.5529169159548086,3.3675154934380602,3.083004668746773,
       2.731888412081624,2.3542800384843257,1.993319457785203,
       1.6902446508990239,1.4796804321972443,1.3856827338133364,
       1.4189903330522349,1.5757979996057716,1.8381912245042966,
       2.176192865147995,2.5511878872330405,2.9203349435576835,
       3.241460788406355,3.4778783646066067,3.602578120377526,
       3.6013137185190844,3.4742296107595165,3.2358445348518745,
       2.913392819795754,2.5437129969500742,2.169039177999716,
       1.832176014259268,1.5716084746145627,1.4171051260544505,
       1.3863172204880727,1.482762125545138,1.6954214825274];

Test runner

Ready to run.

Testing in
TestOps/sec
Canvas Many
var x,y, a, radius;
context.fillStyle = "white";
context.fillRect(0,0, vbWidth, vbHeight);
context.fillStyle = "black";
for(y=0; y<height; y++) {
    cy = ((height-1-y)*2+1)*(glyphRadius+padding);
    for(x=0; x<width; x++) {
        cx = (x*2+1)*(glyphRadius+padding);
        a = 0;
        radius = coef*glyphDef[0];
        context.beginPath();
        context.moveTo(cx+Math.cos(a)*radius,cy+Math.sin(a)*radius);
        for(j=1; j<glyphDef.length; j++) {
            a = j*2*Math.PI/glyphDef.length;
            radius = coef*glyphDef[j];
            context.lineTo(cx+Math.cos(a)*radius,cy+Math.sin(a)*radius);
        }
        context.closePath();
        context.fill();
    }
}
 
ready
Canvas Big
var x,y, a, radius;
context.fillStyle = "white";
context.fillRect(0,0, vbWidth, vbHeight);
context.fillStyle = "green";
context.beginPath();
for(y=0; y<height; y++) {
    cy = ((height-1-y)*2+1)*(glyphRadius+padding);
    for(x=0; x<width; x++) {
        cx = (x*2+1)*(glyphRadius+padding);
        a = 0;
        radius = coef*glyphDef[0];
        context.moveTo(cx+Math.cos(a)*radius,cy+Math.sin(a)*radius);
        for(j=1; j<glyphDef.length; j++) {
            a = j*2*Math.PI/glyphDef.length;
            radius = coef*glyphDef[j];
            context.lineTo(cx+Math.cos(a)*radius,cy+Math.sin(a)*radius);
        }
        context.closePath();
    }
}
context.fill();
 
ready
SVG Many
var x,y, a, radius, group, glyph, psl;
svg.setAttribute("fill", "black");
clearChildren(svg);
group = document.createElementNS(svgNS, "g");
for(y=0; y<height; y++) {
    cy = ((height-1-y)*2+1)*(glyphRadius+padding);
    for(x=0; x<width; x++) {
        cx = (x*2+1)*(glyphRadius+padding);
        a = 0;
        radius = coef*glyphDef[0];
        glyph = document.createElementNS(svgNS, "path");
        psl = glyph.pathSegList;
        psl.appendItem(glyph.createSVGPathSegMovetoAbs(
              cx+Math.cos(a)*radius,cy+Math.sin(a)*radius));
        for(j=1; j<glyphDef.length; j++) {
            a = j*2*Math.PI/glyphDef.length;
            radius = coef*glyphDef[j];
            psl.appendItem(glyph.createSVGPathSegLinetoAbs(
                  cx+Math.cos(a)*radius,cy+Math.sin(a)*radius));
        }
        psl.appendItem(glyph.createSVGPathSegClosePath());
        group.appendChild(glyph);
    }
}
svg.appendChild(group);
ready
SVG Big
var x,y, a, radius, glyph, psl;
svg.setAttribute("fill", "green");
clearChildren(svg);
glyph = document.createElementNS(svgNS, "path");
psl = glyph.pathSegList;
for(y=0; y<height; y++) {
    cy = ((height-1-y)*2+1)*(glyphRadius+padding);
    for(x=0; x<width; x++) {
        cx = (x*2+1)*(glyphRadius+padding);
        a = 0;
        radius = coef*glyphDef[0];
        psl.appendItem(glyph.createSVGPathSegMovetoAbs(
              cx+Math.cos(a)*radius,cy+Math.sin(a)*radius));
        for(j=1; j<glyphDef.length; j++) {
            a = j*2*Math.PI/glyphDef.length;
            radius = coef*glyphDef[j];
            psl.appendItem(glyph.createSVGPathSegLinetoAbs(
                  cx+Math.cos(a)*radius,cy+Math.sin(a)*radius));
        }
        psl.appendItem(glyph.createSVGPathSegClosePath());
    }
}
svg.appendChild(glyph);
ready

Revisions

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

  • Revision 1: published by Jasper on