2D Context

by ethertank

HTML

<h1>2D Context</h1>
<canvas id="world"></canvas>

CSS

body { font: 13px/1 Monaco,"Courier New",monospace; background: #036; color: #fff; }

canvas {
    border: 1px solid #fff;
    display: block;
    margin: 10px 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    background: #222;
    border: 4px solid #fff;
}

th, td { border: 1px solid #fff; padding: 8px 4px; border-width: 3px 1px }
th { text-align: right; font-weight: 300; background: #555; }

JavaScript

var table = document.createElement("table");
var tbody = document.createElement("tbody");
var ctx = document.getElementById("world").getContext("2d");
for (var prop in ctx) {
    var tr = document.createElement("tr");
    var th = document.createElement("th");
    var td = document.createElement("td");

    th.innerHTML = prop;
    td.innerHTML = ctx[prop];

    tr.appendChild(th);
    tr.appendChild(td);

    tbody.appendChild(tr);
}

table.appendChild(tbody);
document.body.appendChild(table);