Как объединить канвас
 

Как воспроизвести сей код в рамках одного <canvas></canvas>? :(

var canvasSec = document.getElementById('secondary-output');
    var ctxSec = canvasSec.getContext('2d');

    ctxctxSec.drawImage(imgSec2,0,0);
    ctxctxSec.globalCompositeOperation = "source-atop";
    ctxctxSec.fillStyle = rgbPrimary;
    ctxctxSec.fillRect(0,0,canvasPri.width,canvasPri.height);
   
    ctxctxSec.drawImage(imgSec,0,0);
    ctxctxSec.globalCompositeOperation = "source-atop";
    ctxctxSec.fillStyle = rgbSecondary;
    ctxctxSec.fillRect(0,0,canvasSec.width,canvasSec.height);

Не совсем понятно, в чем проблема. Конкретизируйте, пожалуйста. В том, что Вы перезаписываете style?

Картинки у Вас наложены одна на другую?

да, одна на другую. есть одна картинка png коротая выполняет роль маски для цвета, есть вторая маска, третья и тд. но больше одной не получается реализовать :-?

mervin,
А почему бы не сделать слоями? Наложите один канвас на другой, на них третий и тд.

То что Вы задумали, по-моему, реализовать тривиально не удастся. У Вас там несколько перерисовок идет.

пример вот http://jsfiddle.net/m1erickson/bfUPr/
в html один canvas, и маска одна. как добавить вторую? третью? даже если бы они пересекались

хочется чтобы в html Был один блок canvas а не 10 и тд

mervin,
Я, честно говоря, в работе с изображениями, да и вообще в канвас, слабоват, но суть того что я предлагаю, вот
http://jsfiddle.net/s6wkst4k/2/

Да это простой выход, просто интересно есть ли выход уложиться в один элемент)

mervin,
Я думаю, что нет. Когда Вы устанавливаете стиль, он переопределяется глобально. У Вас весь холст перерисовывается.

Может быть есть что-то, какие-то другие навороченные инструменты, я хз, но в этом варианте, думаю, нет

А собственно, зачем? Какая разница?