Create a line with fill and stroke

[MichaelD]

Hello,

 

I have created a line to immitate lightning as shown in the http://gamemechanicexplorer.com/ this is my code that creates the line

var ctx = reg.lightningBitmap.context;    var width = reg.lightningBitmap.width;    var height = reg.lightningBitmap.height;    // Our lightning will be made up of several line segments starting at    // the center of the top edge of the bitmap and ending at the bottom edge    // of the bitmap.    // Clear the canvas    ctx.clearRect(0, 0, width, height);    ctx.lineCap = "round";    ctx.lineJoin = "mitter";    // Set the starting position and number of line segments    var x = 0;    var y = 0;    var segments = game.rnd.integerInRange(20, 100);    // Draw each of the segments    for (var i = 0; i < segments; i++) {        // Set the lightning color and bolt width        ctx.strokeStyle = 'rgb(0, 174, 239)';        ctx.fillStyle = 'rgb(255,255,255)';        ctx.lineWidth = 3;        ctx.beginPath();        ctx.moveTo(x, y);        // Calculate an x offset from the end of the last line segment and        // keep it within the bounds of the bitmap        y += game.rnd.integerInRange(-50, 50);        if (y <= 10) y = 10;        if (y >= width - 10) y = width - 10;        // Calculate a y offset from the end of the last line segment.        // When we've reached the ground or there are no more segments left,        // set the y position to the height of the bitmap.        x += game.rnd.integerInRange(20, width / segments);        if (i == segments - 1 || x > width) {            x = width;        }        // Draw the line segment        ctx.lineTo(x, y);        ctx.stroke();        // Quit when we've reached the ground        if (x >= width) break;    }    // This just tells the engine it should update the texture cache    reg.lightningBitmap.dirty = true;

Now what I want to achieve is to have a white fill for the line and blue stroke as it is.

How could I achieve this?

 

Thanks guys.