CODEWITHSUNDEEP
javascriptcanvashtml5-canvascss
user3299657
user3299657

Reputation:

shadow not showing up dark to circle

I am trying to get shadow to my circle...

And I wanted the shadow to be for only one half of the circle and needed to be dark...

I have included my shadow code but its not working...

Providing my code below

http://jsfiddle.net/fHmA8/1/

var drawArc = function(color, arcRadius, degTo, degFrom, isShadow) {
    if (!degFrom) {
        degFrom = 0;
    }
    if (isShadow) {
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowBlur = SHADOW_BLUR;
        ctx.shadowColor = '#656565';
    }
    ctx.lineWidth = SPINNER_WIDTH;
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.arc(centerX, centerY, arcRadius, degStart + degFrom, degStart + degTo, false);
    ctx.stroke();
}

Upvotes: 0

Views: 88

Answers (1)

user1693593
user1693593

Reputation:

Since the shadow is conditional there must be a mechanism to also turn off the shadow. If not the shadow will be applied to all the next drawings.

So, first step:

var drawArc = function(color, arcRadius, degTo, degFrom, isShadow) {
    if (!degFrom) {
        degFrom = 0;
    }
    if (isShadow) {
        ctx.save();               // save context state
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowBlur = SHADOW_BLUR;
        ctx.shadowColor = '#000'; //'#656565'; // black shadow
    }
    ctx.lineWidth = SPINNER_WIDTH;
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.arc(centerX, centerY, arcRadius, degStart + degFrom, degStart + degTo, false);
    ctx.stroke();

    if(isShadow) {
        ctx.restore();            // if shadow was used, remove again
    }
}

Then, if I understand "half" as the leds as that is the only half I can see (imagining the bottom as a full circle), then just change the arguments a little bit around inside the animate() method:

drawArc('#aaa', radius, deg360, null, false);   // don't use shadow here
drawArc('#0e728e', radius, deg);
for (var i = 0, n = Math.floor(deg / deg60); i < n; i++) {
    var from = i * deg30 + deg1;
    var to = from + deg30 - deg1 * 2;
    drawArc('#250696', radius, to, from, true); // use shadow here instead
}

If you did mean to have the background with shadow and not the leds then just change the two flags above to the opposites.

Updated fiddle here

Snap

Upvotes: 1

Related Questions