<html>
<body>
<canvas height='300' width='300' id='cnv' style="border: 1px solid black"></canvas>
<canvas height='300' width='200' id='cnv2' style="border: 1px solid black"></canvas>
<script>
var cnv = document.getElementById("cnv");
var cx = cnv.getContext('2d');
var cnv2 = document.getElementById("cnv2");
var cx2 = cnv2.getContext('2d');
var h = parseInt(cnv.getAttribute("height"));
var w = parseInt(cnv.getAttribute("width"));
var h2 = parseInt(cnv2.getAttribute("height"));
var w2 = parseInt(cnv2.getAttribute("width"));
var id = cx.createImageData(w, h);
var id2 = cx2.createImageData(w2, h);
var rd = Math.round;
var x = 0, y = 1, x1, y1;
var dt = 0.0001;
var t=0;
i=1000000; while (i--) {
dx = -y;
dy = x;
x1 = x + dx*dt;
y1 = y + dy*dt;
t = t + dt;
x = x1; y = y1;
// draw (x, y)
drawOn(id, rd(100*x + 150), rd(100*y + 150), w, h, 0, 0, 0);
// draw x(t), y(t)
drawOn(id2, rd(10*t), rd(100*y + 150), w2, h2, 255, 0, 0);
drawOn(id2, rd(10*t), rd(100*x + 150), w2, h2, 0, 0, 255);
}
drawHorizLine(id, 0, w, h/2, w, h);
drawHorizLine(id2, 0, w2, h2/2, w2, h2);
cx.putImageData(id, 0, 0);
cx2.putImageData(id2, 0, 0);
function drawOn(id, x, y, w, h, red, green, blue) {
if (x < w && y < h && x >=0 && y >=0) {
var idx = 4*(x + y*w);
id.data[idx] = red;
id.data[idx+1] = green;
id.data[idx+2] = blue;
id.data[idx+3] = 255;
}
}
function drawHorizLine(id, xFrom, xTo, y, w, h) {
for (var x = xFrom; x < xTo; x++) {
drawOn(id, x, y, w, h, 0, 0, 0);
}
}
</script>
</body>
</html>