HTML5 Canvas Clip или Crop Все, кроме формы S

Question

Как бы я обрезал все на следующем рисунке, кроме штриха S? Другими словами, избавьтесь от всего прозрачного пространства и сохраняйте только черную S-образную форму ... заранее спасибо!

=== PNG RENDERED ИЗОБРАЖЕНИЕ ХОЛСТА === изображение находится на -> 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;
});