<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>