html canvas shadow being applied to everything

It's usually a good idea to store the old value of these kind of "global" attributes before you change it and use this stored value to restore it later on. Example:

var origShadowColor = ctx.shadowColor;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';

// ... do some stuff

ctx.shadowColor = origShadowColor;

(EDIT: Oops! I see that's what you were already doing with a 0 alpha black.)

This is what you were looking for:

context.shadowColor = "transparent";

By using save, translate and restore you can perform your tasks without worrying about the style changes, for eg.

ctx.save();
ctx.translate(X,Y);

ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';

// do some stuff

ctx.restore();

here X & Y are the co-ordinates where you intended to draw and you do your stuff relative to the co-ordinates 0,0.

This method solves the problem of caching and restoring the previous styles/values and is also very helpful when you work with gradients as they are always plotted relative to the origin (0,0)