Layers

Layers would make life much more easier. It would be possible to update one type of objects and keep other as is. For example in some game it would be handy to draw background, collision blocks, player, collectables on separate layers.

And here come layers!

I want to be able to compose result from different layers. It was a tricky one. Made an [x * y] 8-Bit Array that is a filled pixels bit mask. For example if first and third layers have filled pixel at point {x: 3, y: 5} than bit mask array would store 1<<0 + 1<<2 = 8 in 3 + 5 * width index. When layer erase pixel — canvas subtract 1 << layer order from pixel in filled pixels bit mask and after that top bit of mask value would contain number of layer which pixel should be drawn in place of erased one.

var l1 = px.createLayer(1),
    l2 = px.createLayer(2),
    l3 = px.createLayer(3),
    times = 0, i;
    
for(i = 0; i < h; i++){
  l1.point(5,i, 0xff0000);
  l3.point(15,i, 0xff0000);
}

setInterval(function(){
  times++;

  l2.clear();
  for(var i = 0; i < h; i+=2){
    for(var j = 0; j < 5; j++){
      l2.point(((j+times*i/10-6)%30), i, 0x0000ff)
      l2.point(((j+10+times*i/10-6)%30), i, 0x0000ff)
    }
  }
  if(times++ > 1000)stop();
}, 50)
setInterval(function(){
  l1.clear();
  l3.clear();
  for(i = 0; i < h; i++){
    l1.point(5+sin(times/30)*3,i, 0xff0000);
    l3.point(15+sin(times/30)*3,i, 0xff0000);
  }
},300);

update = ()=>{};