クリップ付きの2つの領域のキャンバスセクション

Question

私は理解して解決するのが難しいかなり迷惑な問題があります。 私はHTML5のキャンバスに二つの領域間の区間を持つようにしたい - 1は、他方がライン（下の写真）で作られた複雑な図である長方形です：

赤い数字は、複雑なエリアと以下の通りです淡い青色は赤い図形上にその一部を持つ長方形です。

私は、読み取り領域と青色領域の両方を持つ領域（中央にピンク色の色）を視覚化したいと考えています。

私ができることは最高ですが、何とか図形が歪んでいるのでかなり不正確です。

これは私が望む結果である：私は本当に問題であると思われるのか分からない

。ここで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);）。