Смущает globalCompositeOperation

Question

Я пытаюсь программировать простую демонстрацию первых нескольких итераций Серпинского Ковер, как так:

Я так хочу, чтобы продолжить это, нажав применить основную маску шаблона в меньшем масштабе каждый шаг. Мне кажется, что, начав с черного квадрата, а затем используя globalCompositeOperation «destination-in» и исходную маску, как и второе изображение, я должен быть способен делать то, что хочу, но я изо всех сил пытаюсь это сделать вместе.

Это рисует фон черный квадрат:

context.globalCompositeOperation = "source-over"; 
context.fillStyle = 'black'; 
context.fillRect(0, 0, 500, 500); 

И тогда я ожидал подобный код должен произвести первый шаг. Но вместо этого он просто пуст.

context.globalCompositeOperation = "destination-in"; 
var mask = [1, 1, 1, 1, 0, 1, 1, 1, 1]; 
for (var m = 0; m < 9; ++m) 
{ 
    var x = 10 + m % 3 * 150; 
    var y = 10 + Math.floor(m/3) * 150; 
    if (mask[m] > 0) 
    { 
     context.fillRect(x, y, 150, 150); 
    } 
} 

Я собрал скрипку в http://jsfiddle.net/128gxxmy/4/ чтобы показать проблему.

Это действительно не сложно, поэтому я явно неправильно понял что-то важное и буду благодарен за любые советы.

Спасибо.

Редактировать: Конечно! Я знаю, почему это пусто. Первый заполняющий прямоугольник очищает все, кроме верхнего левого угла, а следующий вытирает его. Мне нужно использовать rect (...), затем fill() за один раз. Если я переделаю его, чтобы нарисовать каждый проход за один шаг, он должен сделать трюк.

Answer 1

Для полноты и в случае, если другие попадают в одну и ту же ловушку, вот соответствующий код. Я закончил использование временного (невидимого) холста и нарисовал целый слой с одним заполнением.

function drawLevel(k, fill, mask) 
{ 
    tempContext.save(); 
    tempContext.clearRect(0, 0, canvas.width, canvas.height); 

    // current canvas is destination 
    tempContext.drawImage(canvas, 0, 0); 
    // set global composite 
    tempContext.globalCompositeOperation = "destination-in"; 

    // draw source 
    tempContext.beginPath(); 

    // how many squares each row 
    var n = Math.pow(3, k); 

    var size = 450/n/3; 
    for (var i = 0; i < n; ++i) 
     for (var j = 0; j < n; ++j) 
     { 
      for (var m = 0; m < 9; ++m) 
      { 
       var x = 10 + i * size + m % 3 * size; 
       var y = 10 + j * size + Math.floor(m/3) * size; 
       if (mask[m] > 0) 
       { 
        tempContext.rect(x, y, size, size); 
       } 
      } 
     } 

    tempContext.fillStyle = fill; 
    tempContext.fill(); 
    tempContext.restore(); 

    // copy drawing from tempCanvas onto visible canvas 
    context.drawImage(tempCanvas, 0, 0); 
}