兩個區域之間的畫布部分與剪輯

Question

所以我有一個非常討厭的問題，我覺得難以理解和修復。 我想有兩個區域之間部分HTML5畫布 - 一個是矩形線（圖片下方），另一種是複雜圖形制作：

紅色的數字是複雜的區域和下方淡藍色是矩形，它的一部分在紅色的圖上。

我想要只顯示同時具有讀取和藍色區域（中心粉紅色ish顏色）的區域。

我能做的最好的是這個，但是相當不準確，因爲這個數字有點失真。

這是我想要的結果：

我真的不知道是什麼似乎是問題。下面是FIRST和SECOND圖片代碼：

var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 
var pts = [ 
    { 
    "x": 144.54545454545456, 
    "y": 357.3227658791164 
    }, 
    { 
    "x": 313.6363636363636, 
    "y": 357.83576331700544 
    }, 
    { 
    "x": 482.72727272727275, 
    "y": 390.79970884062334 
    }, 
    { 
    "x": 651.8181818181818, 
    "y": 342.08032949810206 
    }, 
    { 
    "x": 820.909090909091, 
    "y": 359.5816507117245 
    }, 
    { 
    "x": 990, 
    "y": 394.7374924508338 
    }, 
    { 
    "x": 1159.090909090909, 
    "y": 375.44796552459445 
    }, 
    { 
    "x": 1328.1818181818182, 
    "y": 348.80309018743964 
    }, 
    { 
    "x": 1497.2727272727273, 
    "y": 387.65889083719674 
    }, 
    { 
    "x": 1666.3636363636363, 
    "y": 361.47353311915924 
    }, 
    { 
    "x": 1835.4545454545455, 
    "y": 389.24337978312957 
    }, 
    { 
    "x": 1835.4545454545455, 
    "y": -10000 
    }, 
    { 
    "x": 144.54545454545456, 
    "y": -10000 
    }, 
    { 
    "x": 144.54545454545456, 
    "y": 357.3227658791164 
    } 
], 
bufferSpace = 2, 
clipX = 144.5, 
clipY = 245, 
clipWidth = 1692, 
clipHeight = 580; 

ctx.beginPath(); 
ctx.moveTo(pts[0].x, pts[0].y + bufferSpace); 
for (var i = 0; i < pts.length; i++) { 
    var pt = pts[i]; 
    ctx.lineTo(pt.x, pt.y + bufferSpace); 
} 
ctx.fillStyle = "red"; 
ctx.globalAlpha = 0.8; 
ctx.closePath(); 
ctx.fill(); 

ctx.fillStyle = "blue"; 
ctx.globalAlpha = 0.2; 
////ctx.fillStyle = fillcolor; 
ctx.fillRect(clipX, clipY, clipWidth, clipHeight); 

//ctx.save(); 
//ctx.clip(); 

//ctx.globalAlpha = 0.8; 
//ctx.fillStyle = fillcolor; 
//ctx.fillRect(clipX, clipY, clipWidth, clipHeight); 
//loadPatternImage(clipX, clipY, clipWidth, clipHeight); 

//ctx.restore(); 

夾片盒：

var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 
var pts = [ 
    { 
    "x": 144.54545454545456, 
    "y": 357.3227658791164 
    }, 
    { 
    "x": 313.6363636363636, 
    "y": 357.83576331700544 
    }, 
    { 
    "x": 482.72727272727275, 
    "y": 390.79970884062334 
    }, 
    { 
    "x": 651.8181818181818, 
    "y": 342.08032949810206 
    }, 
    { 
    "x": 820.909090909091, 
    "y": 359.5816507117245 
    }, 
    { 
    "x": 990, 
    "y": 394.7374924508338 
    }, 
    { 
    "x": 1159.090909090909, 
    "y": 375.44796552459445 
    }, 
    { 
    "x": 1328.1818181818182, 
    "y": 348.80309018743964 
    }, 
    { 
    "x": 1497.2727272727273, 
    "y": 387.65889083719674 
    }, 
    { 
    "x": 1666.3636363636363, 
    "y": 361.47353311915924 
    }, 
    { 
    "x": 1835.4545454545455, 
    "y": 389.24337978312957 
    }, 
    { 
    "x": 1835.4545454545455, 
    "y": -10000 
    }, 
    { 
    "x": 144.54545454545456, 
    "y": -10000 
    }, 
    { 
    "x": 144.54545454545456, 
    "y": 357.3227658791164 
    } 
], 
bufferSpace = 2, 
clipX = 144.5, 
clipY = 245, 
clipWidth = 1692, 
clipHeight = 580; 

ctx.beginPath(); 
ctx.moveTo(pts[0].x, pts[0].y + bufferSpace); 
for (var i = 0; i < pts.length; i++) { 
    var pt = pts[i]; 
    ctx.lineTo(pt.x, pt.y + bufferSpace); 
} 

//ctx.closePath(); 
//ctx.fill(); 

//ctx.globalAlpha = 0.5; 
////ctx.fillStyle = fillcolor; 
//ctx.fillRect(clipX, clipY, clipWidth, clipHeight); 

ctx.save(); 
ctx.clip(); 

ctx.globalAlpha = 0.8; 
//ctx.fillStyle = fillcolor; 
ctx.fillRect(clipX, clipY, clipWidth, clipHeight); 
//loadPatternImage(clipX, clipY, clipWidth, clipHeight); 

ctx.restore(); 

編輯：

這是我的真實情況。這是圖形，我有：

這是我想要的圖形：

你可以看到這裏面有行紅色和藍色部分是一種不正確！

Answer 1

與限定複雜形狀後只需更換主部：

//... complex shape defined... 
ctx.fillStyle = "rgb(205, 41, 89)"; // set target color here 
ctx.fill(); 

ctx.globalCompositeOperation = "destination-in"; 

ctx.fillRect(clipX, clipY, clipWidth, clipHeight); 

這將生成一個掩碼只保留所相交的形狀（「目的地在」）。也可以立即設置目標顏色 - 使用已知值執行此操作，或者即時混合。

Updated fiddle

更新解決問題的新的信息 - 你可以在屏幕外的帆布做這個操作。完成後，簡單地將該離屏畫布作爲圖像繪製回其他圖形的頂部（畫布可直接用作圖像源，即：ctx.drawImage(offCanvas, x, y);）。