I’m trying to create one compound shape in canvas that masks all the content below it – i will be animating these paths so they will eventually intersect – the problem is, when they intersect, they are doing a reverse mask when the drawing overlaps. I just want one solid mask.
JavaScript
x
38
38
1
let region = new Path2D();2
3
// first line4
//ctx.transform(1,0,0,1,xShift,yShift);5
region.moveTo(wdth*(.093+p1x) + p1x, ((ht*0)));6
region.lineTo(wdth*(.096+p2x) + p2x, ((ht*0)));7
region.lineTo(wdth*(.302+p2x) + p1x, ((ht*1)));8
region.lineTo(wdth*(.299+p1x), ((ht*1)));9
ctx.save();10
//ctx.fill(region);11
12
//13
ctx.beginPath();14
region.moveTo(wdth*.326, ((ht*1)));15
region.lineTo(wdth*.329, ((ht*1)));16
region.lineTo(wdth*.537, ((ht*0)));17
region.lineTo(wdth*.534, ((ht*0)));18
ctx.save();19
//ctx.fill(region);20
//21
ctx.beginPath();22
region.moveTo(wdth*.680, ((ht*0)));23
region.lineTo(wdth*.683, ((ht*0)));24
region.lineTo(wdth*.464, ((ht*1)));25
region.lineTo(wdth*.461, ((ht*1)));26
ctx.save();27
//ctx.fill(region);28
//29
ctx.beginPath();30
region.moveTo(wdth*.926, ((ht*1)));31
region.lineTo(wdth*.929, ((ht*1)));32
region.lineTo(wdth*.702, ((ht*0)));33
region.lineTo(wdth*.699, ((ht*0)));34
ctx.fill(region);35
//ctx.beginPath();36
//37
ctx.clip(region, "nonzero");38
Here is an example ( as you can see there is a thin line that overlaps that isn’t clipping correctly – however the OTHER line DOES clip correctly ):
https://codepen.io/pdub888/pen/MWjrdwe
Advertisement
Answer
What you should do is draw it in a separate – hidden – buffer canvas, just fill all the shapes – there’s no need for a Path2D constructor unless you will reuse it, but even then you should not draw your entire shape like this (because of the winding algorithm, certain bits are not part of the fill, but thats not entirely relevant for masking images here – more info and examples here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule)
Then use that buffer canvas to cut mask another canvas using a globalCompositeOperation. Below I have modified your snippet and removed the constructor, and acted directly on the buffer canvas.
JavaScript
1
140
140
1
document.addEventListener("DOMContentLoaded", function(event) {2
let canvas = document.getElementById('mainmask');3
let gradcanvas = document.getElementById('gradmask');4
let aWrapper = document.querySelector('.canvas-wrap');5
let ctx = canvas.getContext('2d');6
let ctxGrad = gradcanvas.getContext('2d');7
let win = {};8
let markerShow = false;9
10
// for reszing canvas 11
function setCanvasScalingFactor() {12
return window.devicePixelRatio || 1;13
}14
15
function resizeViaCanvas() {16
//Gets the devicePixelRatio17
var pixelRatio = setCanvasScalingFactor();18
//The viewport is in portrait mode, so var width should be based off viewport WIDTH19
if (window.innerHeight < window.innerWidth) {20
//Makes the canvas 100% of the viewport width21
var width = Math.round(1.0 * window.innerWidth);22
}23
//The viewport is in landscape mode, so var width should be based off viewport HEIGHT24
else {25
//Makes the canvas 100% of the viewport height26
var width = Math.round(1.0 * window.innerHeight);27
}28
//This is done in order to maintain the 1:1 aspect ratio, adjust as needed29
//var height = width*.5625;30
var height = Math.round(1.0 * window.innerHeight);31
//This will be used to downscale the canvas element when devicePixelRatio > 132
aWrapper.style.width = width + "px";33
aWrapper.style.height = height + "px";34
canvas.width = width * pixelRatio;35
canvas.height = height * pixelRatio;36
gradcanvas.width = width * pixelRatio;37
gradcanvas.height = height * pixelRatio;38
}39
// two colors for mask gradient40
//let color1 = [201, 237, 223]41
let color1 = [5, 5, 5]42
let color2 = [226, 124, 99]43
44
// various rgb colors45
let mint = [201, 237, 223]46
let red = [239, 65, 35]47
let fadedred = [226, 124, 99]48
let purple = [28, 16, 42]49
let beige = [255, 236, 173]50
let peach = [251, 199, 143]51
52
53
let scaleAmt = 1;54
// where the mask is drawn based on tweening scaleAmt55
function drawMask() {56
//the length of each square57
var w = Math.round(canvas.width);58
var h = Math.round(canvas.height);59
console.log( w + "WIDTH" + h + "HEIGHT")60
ctxGrad.clearRect(0, 0, canvas.width, canvas.height);61
ctxGrad.save();62
// ctx.fillStyle = `rgba(239, 65, 35, ${viaAlpha.alpha})`;63
ctxGrad.fillStyle = `"rgb(" + color1[0] + "," + color1[1] + "," + color1[2] + ")"`64
//65
66
67
let wdth = w;68
let ht = h;69
let xShift = 0;70
let yShift = 0;71
72
let p1x = -.1;73
let p2x = .1;74
75
var gradient = ctxGrad.createLinearGradient(0, 0, w, 0);76
gradient.addColorStop(.4, "rgb(" + color1[0] + "," + color1[1] + "," + color1[2] + ")");77
gradient.addColorStop(1, "rgb(" + color2[0] + "," + color2[1] + "," + color2[2] + ")");78
ctxGrad.fillStyle = gradient;79
ctxGrad.fillRect(0, 0, w, h);80
ctxGrad.save();81
82
83
ctx.beginPath();84
ctx.lineWidth = 0;85
ctx.fillStyle = 'blue';86
// first line87
//ctx.transform(1,0,0,1,xShift,yShift);88
ctx.moveTo(wdth*(.093), ((ht*0)));89
ctx.lineTo(wdth*(.096), ((ht*0)));90
ctx.lineTo(wdth*(.302), ((ht*1)));91
ctx.lineTo(wdth*(.299), ((ht*1)));92
ctx.fill();93
//ctx.save();94
95
96
//97
ctx.beginPath();98
ctx.moveTo(wdth*(.326+p1x), ((ht*1)));99
ctx.lineTo(wdth*(.329+p2x), ((ht*1)));100
ctx.lineTo(wdth*(.537+p2x), ((ht*0)));101
ctx.lineTo(wdth*(.534+p1x), ((ht*0)));102
ctx.fill();103
104
//105
ctx.beginPath();106
107
ctx.moveTo(wdth*.680, ((ht*0)));108
ctx.lineTo(wdth*.683, ((ht*0)));109
ctx.lineTo(wdth*.464, ((ht*1)));110
ctx.lineTo(wdth*.461, ((ht*1)));111
ctx.fill();112
113
114
//115
ctx.beginPath();116
ctx.moveTo(wdth*.926, ((ht*1)));117
ctx.lineTo(wdth*.929, ((ht*1)));118
ctx.lineTo(wdth*.702, ((ht*0)));119
ctx.lineTo(wdth*.699, ((ht*0)));120
ctx.fill();121
122
//ctx.beginPath();123
//124
//ctx.clip(region, "nonzero");125
//ctx.clip();126
127
ctxGrad.globalCompositeOperation='destination-in';128
ctxGrad.drawImage(canvas, 0, 0);129
130
ctx.setTransform(1,0,0,1,0,0);131
132
133
//ctx.restore();134
}135
136
//window.addEventListener("resize", resizeViaCanvas, false);137
resizeViaCanvas();138
drawMask();139
});140
JavaScript
1
31
31
1
.canvas-wrap{2
position:fixed;3
width:100vw;4
height:100vh;5
top:0;6
margin: 0 auto;7
left: 50%;8
transform: translate(-50%, -50%);9
top: 50%;10
pointer-events: none;11
opacity:1;12
border:1px solid blue;13
background:transparent;14
}15
16
#mainmask{17
display: block;18
width: 100%;19
height: 100%;20
opacity:.1;21
position:absolute;22
display:none;23
}24
25
#gradmask{26
display: block;27
width: 100%;28
height: 100%;29
background:green;30
position:absolute;31
}JavaScript
1
10
10
1
<div class="wrapper">2
3
<div class="canvas-wrap">4
<canvas id="gradmask">5
</canvas>6
<canvas id="mainmask">7
</canvas>8
</div>9
10
</div>