How to create a star on html5 canvas with canvas api?

This article will show you how to create a star on html5 canvas with the canvas api. Basically what we need here is a whole bunch of points for us to plot the star and then we will loop through those points and connect them together with line.

var context = document.getElementById('canvas').getContext('2d');
context.strokeStyle = 'yellow'; //assign line color to yellow color
context.shadowColor = 'rgba(144, 145, 148, 1.0)'; //assign the color of shadow
context.shadowOffsetX = 1; 
context.shadowOffsetY = 1;
context.shadowBlur = 1;
context.lineWidth = 3; //set line width
context.lineCap = 'round';

//the points we need to plot the star
var array1 = [[326,248],[328,248],[331,248],[333,247],[336,246],[339,245],[344,243],[351,240],[359,237],[369,232],[379,227],[401,217],[413,211],[428,204],[441,197],[456,189],[471,183],[488,178],[523,169],[561,160],[577,156],[590,153],[613,147],[623,145],[630,143],[642,140],[650,138],[654,138],[656,137],[655,138],[654,138],[653,139],[652,139],[652,140],[650,141],[649,142],[646,144],[644,146],[642,148],[640,150],[637,153],[633,158],[626,164],[621,168],[616,172],[607,181],[598,191],[587,204],[567,228],[553,244],[539,262],[523,279],[510,296],[497,313],[484,330],[474,345],[464,357],[455,369],[446,379],[441,386],[430,399],[424,406],[419,412],[416,415],[416,417],[416,415],[416,408],[416,388],[416,380],[416,363],[416,344],[415,311],[415,286],[414,261],[410,236],[406,214],[402,194],[397,175],[394,156],[392,137],[392,121],[392,109],[392,98],[392,85],[392,78],[392,72],[392,70],[392,71],[395,77],[405,92],[414,106],[424,120],[434,132],[444,143],[454,156],[465,166],[475,173],[484,182],[497,192],[509,203],[522,213],[537,223],[549,234],[562,244],[580,260],[590,272],[602,287],[611,299],[619,310],[626,319],[632,326],[635,330],[638,334],[640,336],[639,336],[635,335],[629,333],[614,327],[600,323],[584,317],[570,312],[557,308],[547,304],[540,301],[531,297],[524,295],[516,291],[509,289],[503,288],[495,284],[486,283],[479,281],[471,279],[462,277],[458,276],[452,275],[447,273],[442,273],[435,271],[431,271],[426,270],[420,268],[412,266],[408,265],[401,262],[397,261],[393,259],[389,257],[386,257],[382,256],[378,254],[374,254],[369,253],[365,252],[361,252],[358,251],[355,250],[352,250],[348,249],[347,249],[346,248],[345,248],[344,248],[343,248],[342,248],[341,248],[339,247],[335,246],[332,246],[330,246]];

//start drawing star
context.beginPath();
context.moveTo(324,248);
for (var i = 0; i <array1.length; i++) {
	context.lineTo(array1[i][0],array1[i][1]);
	context.stroke();
}
context.closePath();

The final outcome is as follow:-

HTML5 Star