artin/miniPaint
1
0
Fork 0
mirror of https://github.com/viliusle/miniPaint.git synced 2026-02-06 14:11:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Issue #231 - Implement Clipping Mask for render() method

Browse Source
This commit is contained in:
Karlen Manaseryan 2021-10-17 18:16:43 +04:00
parent e6923445dc
commit 5d489738f6
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/js/core/base-layers.js
View File

@ -170,21 +170,24 @@ class Base_layers_class {
zoomView.apply();
const newCanvas = this.createNewCanvas(this.ctx);
const newCanvas = this.createNewCanvas(
this.ctx,
config.HEIGHT,
config.WIDTH
);
const ctxForSourceAtop = newCanvas.getContext("2d");
let hasSourceAtopLayer = false;
// TODO - this line might be removed, it's added for later restore function
this.ctx.save();
//render main canvas
for (var i = layers_sorted.length - 1; i >= 0; i--) {
var value = layers_sorted[i];
const nextValue = layers[i - 1];
const nextValue = layers_sorted[i - 1];
if (
value.composition === "source-atop1" ||
(nextValue && nextValue.composition === "source-atop1")
value.composition === "source-atop" ||
(nextValue && nextValue.composition === "source-atop")
) {
hasSourceAtopLayer = true;
ctxForSourceAtop.globalAlpha = value.opacity / 100;
@ -198,7 +201,6 @@ class Base_layers_class {
}
}
// TODO - need some investigation here
if (hasSourceAtopLayer) {
this.ctx.restore();
this.ctx.drawImage(newCanvas, 0, 0);
@ -255,11 +257,13 @@ class Base_layers_class {
/**
* Creates a fresh new canvas with the same height and width as the provided one
* @param {canvas.context} ctx
* @param {number} [h]
* @param {number} [w]
*/
createNewCanvas(ctx) {
createNewCanvas(ctx, h, w) {
const newCanvas = document.createElement("canvas");
newCanvas.height = ctx.canvas.height;
newCanvas.width = ctx.canvas.width;
newCanvas.height = h || ctx.canvas.height;
newCanvas.width = w || ctx.canvas.width;
return newCanvas;
}