Stroke and Fill style in HTML5 canvas

We use the strokeStyle property with stroke method and fillStyle property with the fill method. The stroke and fill style specifies the color the element.

When we need to fill an HTML5 Canvas shape with a solid color, we use the fillStyle and fill method.


ctx.fillStyle="red";
ctx.fill();

from the following the shape will fill with solid red color.
And in the case of strokeStyle:

ctx.strokeStyle="red";
ctx.stroke();

shape will be draw in the red color.

Fill and stroke rectangle

below is an example to draw rectangles with stroke, and fill.

context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);

context.strokeStyle = "#ff0000";
context.lineWidth = 3;
context.strokeRect(10,10, 100,100);

Another Example

The following example will draw six arc shape, three arc use the stroke outlined style and a rest of all use fill style. With the example you will get the clear idea about the start and end angle.
 

 function draw() {
                var ctx;
                var canvas = document.getElementById("MyCanvas");
                if (canvas.getContext) {
                    ctx = canvas.getContext("2d");
                    ctx.arc(20, 100, 40, 0, Math.PI * 3 / 2, true);
                    ctx.stroke();
 
                    ctx.beginPath();
                    ctx.arc(120, 100, 40, 0, Math.PI, true);
                    ctx.stroke();
 
                    ctx.beginPath();
                    ctx.arc(220, 100, 40, 0, Math.PI / 2, true);
                    ctx.stroke();
 
                    ctx.beginPath();
                    ctx.arc(320, 100, 40, 0, Math.PI * 2, true);
                    ctx.stroke();
 
                    ctx.fillStyle = "black";
                    ctx.beginPath();
                    ctx.arc(20, 200, 40, 0, Math.PI * 3 / 2, true);
                    ctx.fill();
 
                    ctx.beginPath();
                    ctx.arc(120, 200, 40, 0, Math.PI, true);
                    ctx.fill();
 
                    ctx.beginPath();
                    ctx.arc(220, 200, 40, 0, Math.PI / 2, true);
                    ctx.fill();
 
                    ctx.beginPath();
                    ctx.arc(320, 200, 40, 0, Math.PI * 2, true);
                    ctx.fill();
                } 
            }

From the above all arc methods use the anticlockwise direction. This parameter is not required in the Safari browser.
 
stroke and fill style in html5

Stroke and Fill Style