填多邊形面積HTML5畫布

Question

這是HTML代碼

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>  
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script> 
<input type="button" value="draw" onclick="setdraw()" /> 
<input type="button" value="fill" onclick="setfill()" /> 
<div id="drawarea"> 
</div> 

這是JavaScript代碼

var flag = false; 
var pen_arr = []; 
var drawble = true; 
$(document).ready(function(){ 
    init(); 
}); 

function setfill(){ 
    drawble = false; 
} 

function setdraw(){ 
    drawble = true; 
} 

function init(){ 
    stage = new Kinetic.Stage({ 
     container: 'drawarea', 
     width: 500, 
     height: 800 
    }); 

    background = new Kinetic.Rect({ 
     x: 0, 
     y: 0, 
     width: stage.getWidth(), 
     height: stage.getHeight() 
    }); 

    layer = new Kinetic.Layer(); 
    layer.add(background); 

    stage.add(layer); 

    stage.on("mousedown", mouseDown); 
    stage.on("mousemove", mouseMove); 
    stage.on("mouseup", mouseUp); 
} 

function mouseDown(){ 

    if (drawble === true){ 
    flag = true; 
    var mousePos = stage.getMousePosition(); 
    var tmp_pen = new Kinetic.Line({ 
     points:[mousePos.x, mousePos.y, mousePos.x + 1, mousePos.y + 1 ], 
     stroke: "blue", 
     strokeWidth: 3 
    }); 
    layer.add(tmp_pen);  
    pen_arr.push(tmp_pen); 
    layer.drawScene(); 
    }else{ 
    flag = false; 

    // in here i have to carry fill function 
    // when i click in stage, i have to set the fill color in closed area after drawing pen 
    } 

} 

function mouseMove(){ 
    if(flag === true) { 
     var mousePos = stage.getMousePosition(); 
     var tmp_pen = pen_arr[pen_arr.length - 1]; 
     var points = tmp_pen.getPoints(); 
     points.push({x:mousePos.x,y:mousePos.y}); 
     tmp_pen.setPoints(points); 
     layer.drawScene(); 
    } 
} 

function mouseUp(){ 
    flag = false;  
} 

檢查這個結果，請。

在這裏你可以檢查一些圖紙樣品
有兩個按鈕，「補」和「畫」
您可以通過單擊繪圖筆「畫」按鈕
我們必須通過點擊來設置填充顏色「填充「按鈕
點擊」填充「按鈕後，我們可以點擊舞臺上的任意一點。
在那個時候，我們要設置填充顏色的區域封閉

所以我的問題是：「我必須設置在該地區的填充顏色關閉」

Answer 1

我不會給你的代碼。
檢查了這一點：

http://www.html5canvastutorials.com/tutorials/html5-canvas-shape-fill/