HTML5キャンバスクリップまたは切り取りS字以外のすべての形状

Question

Sストロークを除いて、次の図のすべてをクリップするにはどうすればよいですか？言い換えれば、すべての透明な空間を取り除き、黒いSの形を維持するだけです...事前に感謝！

に位置CANVASの=== 画像の=== PNGレンダリング画像 - CANVAS図の>http://buildasearch.com/ant/s.png

===実際の座標===

var x = '68,67,66,65,64,63,62,61,60,59,57,56,55,54,53,52,51,51,51,51,51,51,51,52,55,56,52,58,60,59,61,62,64,65,66,68,70,71,72,74,75,76,77,78,78,79,79,79,79,79,79,79,79,79,79,79,79,78,76,74,71,67,59,56,54,52,49,47,46,45,43,42,41,40,39'; 

var y = '11,11,11,11,11,12,12,12,12,12,13,14,14,15,17,18,20,21,23,24,27,30,32,32,34,34,33,34,34,34,34,35,35,35,35,35,35,36,36,37,38,38,39,40,41,42,43,44,45,47,48,49,50,51,52,53,54,55,56,57,58,59,59,59,60,60,60,60,60,60,60,60,60,60,60';  

Answer 1

それはもし容易になるだろうxおよびyは、'6,3,19'の代わりに[6, 3, 19]の形式でした。この回答の目的のために、コードを少し簡単にするので、このようにしたと仮定します。

後で計算することはかなり可能ですが、必要なビットを取得してからキャンバスのサイズを変更すると面倒です。できるだけ手元で計算するのがより簡単で速くなります。このようなものはうまくいくはずです：

// Data specification 
var x = [68,67,66,65,64,63,62,61,60,59,57,56,55,54,53,52,51,51,51,51,51,51,51,52,55,56,52,58,60,59,61,62,64,65,66,68,70,71,72,74,75,76,77,78,78,79,79,79,79,79,79,79,79,79,79,79,79,78,76,74,71,67,59,56,54,52,49,47,46,45,43,42,41,40,39], 
    y = [11,11,11,11,11,12,12,12,12,12,13,14,14,15,17,18,20,21,23,24,27,30,32,32,34,34,33,34,34,34,34,35,35,35,35,35,35,36,36,37,38,38,39,40,41,42,43,44,45,47,48,49,50,51,52,53,54,55,56,57,58,59,59,59,60,60,60,60,60,60,60,60,60,60,60]; 

// Work out the extreme points in both dimensions 
var xs = x.slice().sort(), 
    ys = y.slice().sort(), 
    minX = xs[0], 
    maxX = xs[xs.length-1], 
    minY = ys[0], 
    maxY = ys[ys.length-1]; 
// Resize the canvas 
canvas.width = maxX - minX + 1; 
canvas.height = maxY - minY + 1; 
// Shift the points to fit on the shrunk canvas 
x.forEach(function(v, i) { 
    x[i] = v - minX; 
}); 
y.forEach(function(v, i) { 
    y[i] = v - minY; 
});