Codelife Codelife - 1 year ago 102
CSS Question

Create a star and give a background color using Javascript

I want to draw a star and give it a background color by using Javascript. This is the jsfiddle :-

But red background color is covering whole sqaure area, I just want to give background to that star only.

This is the Javascript :-

var canvas, ctx, length = 15; // length of the star's arm

// grab a reference to the 2d context from canvas element
canvas = document.getElementById("star");
ctx = canvas.getContext("2d");

// move into the middle of the canvas, just to make room
ctx.translate(30, 30);

// initial offset rotation so our star is straight
ctx.rotate((Math.PI * 1 / 10));

// make a point, 5 times
for (var i = 5; i--;) {
// draw line up
ctx.lineTo(0, length);
// move origin to current same location as pen
ctx.translate(0, length);
// rotate the drawing board
ctx.rotate((Math.PI * 2 / 10));
// draw line down
ctx.lineTo(0, -length);
// again, move origin to pen...
ctx.translate(0, -length);
// ...and rotate, ready for next arm
ctx.rotate(-(Math.PI * 6 / 10));
// last line to connect things up
ctx.lineTo(0, length);
// stroke the path, you could also .fill()

Answer Source

Use ctx.fillStyle = "#f00" after ctx being defined and ctx.fill() at the end.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download