Draw solid vs semi-transparent shapes on canvas

Benchmark created by JT on

Description

Tests drawing shapes with rgba fill colours vs rgb fill colours (solid) on top of an image background.

Preparation HTML

<div id="image" style="background-image: url('http://lighttalk.via-verlag.com/wp-content/uploads/2012/10/2505946893_4bae34a1af.jpg'); width: 500px; height: 500px;">
<canvas id="canvas" width="500" height="500">
</canvas>
</div>

Setup

var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    
    var can2 = document.createElement('canvas');
    can2.width = 500;
    can2.height = 500;
    var ctx2 = can2.getContext('2d');
    ctx2.fillStyle = "rgb(96, 169, 23)";
    ctx2.beginPath();
    ctx2.arc(250, 250, 250, 0, Math.PI*2, true);
    ctx2.fill();
    
    var can3 = document.createElement('canvas');
    can3.width = 500;
    can3.height = 500;
    var ctx3 = can2.getContext('2d');
    ctx3.fillStyle = "rgba(96, 169, 23, 0.65)";
    ctx3.beginPath();
    ctx3.arc(250, 250, 250, 0, Math.PI*2, true);
    ctx3.fill();

Teardown


    ctx.clearRect(0,0,500,500);

Test runner

Ready to run.

Testing in
TestOps/sec
Solid Rectangle
ctx.fillStyle = "rgb(96, 169, 23)";
ctx.fillRect(0,0,500,500);
ready
Alpha Rectangle
ctx.fillStyle = "rgba(96, 169, 23, 0.65)";
ctx.fillRect(0,0,500,500);
ready
Solid Circle
ctx.fillStyle = "rgb(96, 169, 23)";
ctx.beginPath();
ctx.arc(250, 250, 250, 0, Math.PI*2, true);
ctx.fill();
ready
Alpha Circle
ctx.fillStyle = "rgba(96, 169, 23, 0.65)";
ctx.beginPath();
ctx.arc(250, 250, 250, 0, Math.PI*2, true);
ctx.fill();
ready
Pre-rendered Solid Circle
ctx.drawImage(can2, 0, 0);
ready
Pre-Rendered Alpha Circle
ctx.drawImage(can3, 0, 0);
ready

Revisions

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