custom wave forms in web audio API

Question

I'm working through this awesome article: https://jackschaedler.github.io/circles-sines-signals/dft_introduction.html

I want to use the Web Audio API's PeriodicWave object to implement this demo:

However, when I set a periodic wave with these settings:

 var real = new Float32Array([0,0,1,0,1]);
 var imag = new Float32Array(real.length);
 var customWave = context.createPeriodicWave(real,imag);
 osc.setPeriodicWave(customWave);

I output a wave that looks like this:

Here is full code: http://jsbin.com/zaqojavixo/4/edit To see the waveform, please press play the sound a few times.

I believe these should match up, so here are my questions:

1. Am I missing something fundamental about the theory here or am I just implementing it incorrectly? Is the PeriodicWave object supposed to do the same thing as illustrated in the article?
2. If I am taking the wrong approach, how would I implement this diagram in Web Audio API? I have been able to match below by connecting two different sine waves of different frequencies to the same gain node - how is this different than using the PeriodicWave object?
3. I'm new to DSP and Web Audio API - any suggested reading would be appreciated!
4. Secondarily, in my example, I have to push the 'play the sound' button a couple of times before correct data is drawn to the canvas - the analyser seems to be behind the oscillator, even though analyser.getFloatTimeDomainData() is called after I start the oscillator any thoughts on what's going on here?

---

Edit: As noted in comments, my graph is upside down (on the canvas 0,0 is the upper left corner).