Langton Ant on JS and Canvas

After reading the post here about this wonderful little animal (wiki), I thought it would be interesting to implement it and in the evening I wrote it on js + canvas.
At the same time, so that it would not be boring to add neighbors to him, there were 5 color populations and a limited field, which gave rise to boundary patterns.

Well, there would be an ant and there was, but having started it today I caught a very interesting behavior, at some point the yellow population began methodically to get rid of the fruits of pink activity and not to leave traces of its activity, I was interested and I spent a couple more minutes watching field, the yellow population completely destroyed the starting location of pink, then completely destroyed itself and began to build a brave new world with a “0”, i.e. with 1 yellow pixel.

The starting position of the yellow center field, and the captured and rebuilt territory is the remaining yellow block


')
I assume that this is due to the fact that each population lives in its own setInterval () and that was the starting point for creating this combination and not every time such behavior can be seen.

I would like to hear comments on the causes of this phenomenon and the ways of its repetition.

Code and demo Demonstration http://wrewolf.imtqy.com/LangtonsAntJS/


P.S.

I am pleased to hear the options for improving the quality of life of these insects.

UPD.
Updated pictures.