JS Grapher

by Tgwizman

HTML

<div id="wrapper">
    <div id="title">Parametric Evaluator</div>
    <div id="table"><canvas id="c"></canvas></div>
    <div id="controls">
        x ( t ) =<input type="text" id="x" value="Math.cos(t)*10" /><br>
        y ( t ) =<input type="text" id="y" value="Math.sin(t)*10" /><br>
        <input type="submit" id="graph" value="Graph" />
    </div>
</div>

CSS

#wrapper {
    margin: 10px auto;
    width: 320px;
}

#title {
    margin: 5px auto;
    display: block;
    width: 320px;
    font-weight: bold;
    text-align: center;
}

#table {
    margin: 5px 0px;
    width: 320px;
    height: 240px;
}

#c {
    width: 320px;
    height: 240px;
    border: 1px solid #F00;
}

img {
    width: 320px;
    height: 240px;
    border: 1px solid #F00;
}

#controls {
    margin: 0px;
    width: 320px;
    text-align: center;
}

input {
    margin: 5px 0px;
    width: 250px;
    height: 24px;
}

#graph {
    width: 100px;
    height: 26px;
}

//

JavaScript

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

canvas.width = 320;
canvas.height = 240;

tMin = -320;
tMax = 320;

function graph() {
    ctx.fillStyle = '#FFF';
    ctx.fillRect(0,0,canvas.width,canvas.height);
    for (t = tMin; t < tMax; t++) {
        ctx.fillStyle = '#000';
        ctx.fillRect((t*5) + (canvas.width / 2), -1 + (canvas.height / 2), 1, 1);
        ctx.fillRect(1 + (canvas.width / 2), (t*5) + (canvas.height / 2), 1, 1);
        ctx.fillRect(t + (canvas.width / 2), 0 + (canvas.height / 2), 1, 1);
        ctx.fillRect(0 + (canvas.width / 2), t + (canvas.height / 2), 1, 1);
    }
    for (t = tMin; t < tMax; t+=0.01) {
        ctx.fillStyle = '#00F';
        x = eval(document.getElementById('x').value);
        y = eval(document.getElementById('y').value);
        ctx.fillRect((x*5) + (canvas.width / 2), -(y*5) + (canvas.height / 2), 1, 1);
    }
}
graph();

document.getElementById('graph').onmouseup = function() {
    document.getElementById('table').innerHTML = '<canvas id="c"></canvas>';
    graph();
    document.getElementById('table').innerHTML = '<img src="' + canvas.toDataURL("image/png") + '" />';
}