D3 Examples - 2D with stacksgl

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="UTF-8">
<body style="font-family: sans-serif;">
<div style="float: left;">
    <div style="width: 478px; height: 478px; position: relative; border: 1px solid #ccc; overflow: hidden;">
        <div style="background-color: rgba(255,0,0,0.5); width: 250px; height: 250px; position: absolute;"></div>
        <div style="background-color: rgba(0,0,255,0.25); width: 250px; height: 250px; position: absolute; left: 125px; top: 125px;"></div>
        <div style="background-color: rgba(0,0,0,0.12); width: 125px; height: 125px; position: absolute; left: 375px; top: 375px;"></div>
        <div style="background-color: rgba(255,255,0,0.5); width: 250px; height: 250px; position: absolute; left: 125px; top: 0; border-radius: 125px;"></div>
        <div style="position: absolute; left: 375px; bottom: 0; color: rgba(0, 0, 0, 0.25); font-size: 36px; line-height: 28px; font-family: Arial; height: 28px;">
            A
        </div>
    </div>
    <b>HTML+CSS</b>
</div>
​
<div>
    <canvas width="478" height="478" style="border: 1px solid #ccc; display: block;"></canvas>
    <b>WebGL</b>
</div>
​
<script src="stackgl.min.js"></script>
<script>
    demo();
​
    function demo() {
        var canvas = document.getElementsByTagName('canvas')[0];
        canvas.style.border = '1px solid #ccc';
​
        stackgl.init(canvas, [1, 1, 1, 1]);
​
        var scene = [];
        var object;
​
        object = stackgl.rectangle(250, 250, [1, 0, 0, 0.5]);
        object.t = [0, 0, 0];
        scene.push(object);
​
        object = stackgl.rectangle(250, 250, [0, 0, 1, 0.25]);
        object.t = [125, 125, 0];
        scene.push(object);
​
        object = stackgl.rectangle(125, 125, [0, 0, 0, 0.12]);
        object.t = [375, 375, 0];
        scene.push(object);
​
        object = stackgl.circle(125, 48, [1, 1, 0, 0.5]);
        object.t = [250, 125, 0];
        scene.push(object);
​
        object = stackgl.text('A', 36, 'Arial', [0, 0, 0, 0.25]);
        object.t = [375, 478 - 28, 0];
        scene.push(object);
​
        stackgl.update(scene);
        stackgl.dispose();
    }
</script>
</body>
​
    