Нарисуйте одиночный холст [дубликат]

Я думаю, что вы ищете что-то вроде библиотеки pixastic ( Documentation ).

Если вы хотите «нормальный» режим смешивания

• Убедитесь, что ваши элементы canvas не имеют фона, указанного в CSS. Это оставит их прозрачными.
• Абсолютно поместите все ваши canvas элементы поверх друг друга. Например, оберните их все в <div class="canvas-layers">, а затем используйте CSS, например:

   /* Set to the same width/height as the canvases */
  .canvas-layers { position:relative; width:400px; height:300px }
  .canvas-layers canvas { position:absolute; top:0; left:0 }
  

• . Пусть браузер автоматически выполняет смешение полупрозрачных областей поверх друг друга.

Если вам нужен «нормальный» режим смешивания на одном холсте

• Если вы абсолютно должны сгладить их до одного холста (например, вы хотите создать uri данных из результата ), затем используйте drawImage с одним холстом в качестве исходного изображения. Например, см. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Using_other_canvas_elements

Если вы хотите простую маскировку, светлее или темнее

• Используйте свойство globalCompositeOperation контекста canvas и используйте drawImage с одним холстом в качестве источника. См. Пример здесь: https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

Если вы хотите, чтобы режимы наложения в стиле Photoshop

• Я создал простую, легкую библиотеку с открытым исходным кодом для выполнения режимов смешивания в стиле Photoshop из одного контекста HTML Canvas в другой: context-blender . Вот пример использования:

  // Might be an 'offscreen' canvas
  var over  = someCanvas.getContext('2d');
  var under = anotherCanvas.getContext('2d');
  
  over.blendOnto( under, 'screen', {destX:30,destY:15} );
  

  Для получения дополнительной информации см. README .

Вы можете использовать css позицию 2 (или больше) холстов друг над другом и позволить каждому работать как слой. Im not sure Точно, как это сделать с помощью css, но я сделал что-то подобное, должен иметь холсты над eachother, один для 2d-контента и один для webgl, и пользователь может легко переключаться между ними

<div height="640" style="position: absolute;">
    <canvas width="640" style="position: absolute;visibility: hidden;" height="640" tabindex="1"></canvas>
    <canvas width="640" height="640" style="visibility: hidden;position: absolute;"></canvas>
</div>

Я думаю, что код не является пропуском proff и не прав, но он работает. Надеюсь это поможет.

Если я не использую обходное решение, которое вы упомянули. (Я фактически сделал приложение, подобное тому, где я нарисовал 2d тени на экранном холсте и нарисовал его поверх основного холста с прозрачностью, выглядел довольно аккуратно)