How to remove drop shadow when drawing onto HTML5 Canvas

3
votes

I'm drawing a puzzle in HTML5 Canvas.

Full code so far is here: https://github.com/Integralist/HTML5-Image-Slider-Game

There is always one empty space and when the user clicks on a puzzle piece I move it into the empty space.

But when I do this, the puzzle displays a drop shadow, see below image.

Any ideas why this would happen? Is it because I'm drawing on top of content already within the canvas? Is the work-around to clear the canvas before drawing, and if so is there a way I can do this without having to re-draw all the other puzzle pieces as I'm not sure how best to do that.

UPDATE: I tried clearing the entire canvas and then drawing the puzzle piece into the empty space but it still was drawn with a drop shadow?

1
javascripthtmlcanvas
How are we supposed to help you without seeing even a single line of your code? – Matt Ball
@MДΓΓБДLL I've updated this above, but for your reference see: github.com/Integralist/HTML5-Image-Slider-Game – Integralist
-1 because it is no longer there... you should had put something. – cauchy

1 Answers

4
votes

On line 74 and 75, you set the shadow offset to 2px. This needs to be set back to 0 once you start drawing pieces.