2D javascript table graphics The challenge

Make a JavaScript program that can use a HTML table as a canvas, having each cell a pixel.
You can either input the position and color values in a form or by using the console.

Score calculation


+10 points for not using JQuery
+15 points for the cells scaling equally to keep the same table aspect ratio when the browser is scaled
+15 points for accomplishing the last thing without using any kind of CSS
+[number of upvotes]
+20 points if you do not label the cells' tags with coordinates (it counts if you make an JavaScript array like {"cell1-1": ..., "cell1-2": ..., "cell1-3": ...} but it doesn't count when you label the &lt;td&gt; tag itself, like &lt;td id="cell-7-9"&gt; or &lt;td class="cell-8-1"&gt;)


So if you have 67 upvotes, no JQuery (+10), the cells scaling (+15) but by using CSS (no +15) and you do not label the cells (+20), then your score will be 67 + 10 + 15 + 0 + 20 = 112.

The challenge ends on 20 Feb 2014, 4:00 PM GMT+0.

WINNERS:
Doorknob -> 61 + 3 = 64 points
Victor, with 60 + 1 = 61 points
they have very close scores so I couldn't exclude Victor.
Score: 61

10 (no jQuery) + 15 (scaling cells) + 15 (the scaling part uses no CSS) + 20 (no labels) + 1 (upvotes)

When you click on a cell, it turns the current color.

JavaScript

var w = h = 20, color = 'red'
function createTable() {
    var tbl = document.createElement('table')
    tbl.id = 'tbl'
    for (var i = 0; i &lt; h; i++) {
        var tr = document.createElement('tr')
        for (var i2 = 0; i2 &lt; w; i2++) {
            var td = document.createElement('td')
            td.addEventListener('mousedown', draw)
            tr.appendChild(td)
        }
        tbl.appendChild(tr)
    }
    document.body.appendChild(tbl)
    return tbl
}
function killTable(tbl) {
    tbl.parentNode.removeChild(tbl)
}
var tbl = createTable()

function draw(e) {
   e.preventDefault()
   this.style.backgroundColor = color
}

document.getElementById('finalize').addEventListener('click', finalize)
function finalize() {
    var tds = document.getElementsByTagName('td')
    for (var i = 0; i &lt; tds.length; i++) {
        tds[i].style.border = 'none'
        tds[i].removeEventListener('mousedown', draw)
    }
    document.getElementById('optionsWrapper').style.display = 'none'
}

document.getElementById('changeColor').addEventListener('click', changeColor)
function changeColor() {
    color = document.getElementById('color').value
}

document.getElementById('changeDims').addEventListener('click', changeDims)
function changeDims() {
    var dims = document.getElementById('dims').value.split('x')
    w = +dims[0], h = +dims[1]

    killTable(tbl)
    tbl = createTable()
}


HTML

&lt;div id='optionsWrapper'&gt;
    &lt;button id='finalize'&gt;Finalize&lt;/button&gt;&lt;br/&gt;
    &lt;label for='color'&gt;Color: &lt;/label&gt;&lt;input id='color' type='text' value='red' /&gt;&lt;button id='changeColor'&gt;Go&lt;/button&gt;&lt;br/&gt;
    &lt;label for='dims'&gt;Change dimensions (WARNING: will erase drawing): &lt;/label&gt;&lt;input id='dims' type='text' value='20x20' /&gt;&lt;button id='changeDims'&gt;Go&lt;/button&gt;
&lt;/div&gt;


CSS

td {
    width: 5px;
    height: 5px;
    padding: 0;
    border: 1px solid black;
}

table {
    border-collapse: collapse;
}


JSFiddle

http://jsfiddle.net/D9u2N/1/

Screenshots

Zoomed in view (while editing, click to enlarge to full size):


  


Finalized view (zoomed out):