building a color wheel in html5

I am just learning some details about html5 canvas, and in the progress, I am trying to build a simple color wheel by wedges (build a 1 degree wedge at a time and add it up to 360 degree). However, I am getting some weird marks on the gradient as shown in the following image: . Here is the fiddle that produced the colorwheel: http://jsfiddle.net/53JBM/ In particular, this is the JS code: ``` var canvas = document.getElementById("picker"); var context = canvas.getContext("2d"); var x = canvas.width / 2; var y = canvas.height / 2; var radius = 100; var counterClockwise = false; for(var angle=0; angle<=360; angle+=1){ var startAngle = (angle-1)*Math.PI/180; var endAngle = angle * Math.PI/180; context.beginPath(); context.moveTo(x, y); context.arc(x, y, radius, startAngle, endAngle, counterClockwise); context.closePath(); context.fillStyle = 'hsl('+angle+', 100%, 50%)'; context.fill(); } ``` If anyone can point out what I am doing wrong or if there is a better way to accomplish what I am attempting to do it would be much appreciated :)