KineticJS canvas on top of Google Map. Shapes fall apart on drag and zoom

Question

I'm trying to display property boundaries on top of a Google Map by using KineticJS and a Google Maps OverviewLayer.

It works great (1000 parcels being shown at a time. Much faster than Google.Maps.Polygon())

When I drag the Google Map down, then zoom in/out, the top shapes get cut off and don't re-draw when I zoom back out.

I'm guessing its a setX, setY thing but I don't understand the underlying concepts enough.

Any help would be appreciated.

Here is my app: KineticJS and Google Maps OverlayView test site

I added a light-green background to the KineticJS canvas to see what it happening when you zoom in.

The canvas seems to stay locked in place and the same width/height but when you zoom in I'm guessing the canvas should grow proportionally.

I can't figure out how to do that though....

Any help would be appreciated!