How to fill custom shape has been draw in Canvas?
<p>Im try to drew custom shape, but since I use moveTo ..I cant be filled it, so That my question is there's any way can may be determined points on screen to fill shape? or to do that I most use or drew another real shape in the same block as layer ...</p>

<p>Look at my example here to drew a simple shape: 
<a href="https://i.stack.imgur.com/32HFn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/32HFn.png" alt="Custom shape before &amp; after fill"></a></p>

<p>to I can fill image with blue color Im drew a Fill rectangle, so That is is a true way? </p>

<p>Code for shape for before fill: </p>

<pre><code>var canvas3 = document.getElementById('canvas3'); 
        var c3 = canvas3.getContext('2d'); 
        c3.fillStyle = 'green';
        c3.beginPath();
        c3.moveTo(10,30);
        c3.lineTo(200,30);
        c3.moveTo(10,80);
        c3.lineTo(200,80);
        c3.moveTo(10,30);
        c3.lineTo(10,180);
        c3.moveTo(200,30);
        c3.lineTo(200,180);
        //c3.closePath();
        c3.fill();
        c3.lineWidth = 5;
        c3.strokeStyle = 'orange';
        c3.stroke();
</code></pre>

<p>Code for shape after fill: </p>

<pre><code>var canvas3 = document.getElementById('canvas3'); 
        var c3 = canvas3.getContext('2d'); 
        c3.fillStyle = 'blue';
        c3.beginPath();
        c3.moveTo(10,30);
        c3.fillRect(10,30,190,60);
        c3.moveTo(10,30);
        c3.lineTo(10,180);
        c3.moveTo(10,90);
        c3.lineTo(200,90);
        c3.moveTo(200,30);
        c3.lineTo(200,180);
        c3.moveTo(10,30);
        c3.lineTo(200,30);
        //c3.closePath();
        c3.fill();
        c3.lineWidth = 5;
        c3.strokeStyle = 'orange';
        c3.stroke();
</code></pre>

<p>and finally which is a best way to I can drew shapes like this? 
Note: Im new on html5 canvas and I read from <a href="http://joshondesign.com/p/books/canvasdeepdive/chapter01.html" rel="nofollow noreferrer">this online book</a>.</p>