If you want to add a glow effect to shapes drawn on canvas, you can't apply CSS directly, but you can achieve the effect by utilizing shadows.
Check out this demo for an example
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width,
h = canvas.height,
cx = w * 0.5,
cy = h * 0.5,
glow = 0,
dlt = 1,
max = 40;
ctx.shadowColor = 'rgba(100, 100, 255, 1)';
ctx.fillStyle = '#fff';
function animate() {
ctx.clearRect(0, 0, w, h);
ctx.shadowBlur = glow;
ctx.beginPath();
ctx.arc(cx, cy, cx * 0.25, 0, 6.28);
ctx.fill();
glow += dlt;
if (glow <= 0 || glow >= max) dlt = -dlt;
requestAnimationFrame(animate);
}
animate();
Update
To create an outline with an outer glow effect, you can "punch out" the center of the circle using a composite operation. The following modification demonstrates how to achieve this:
ctx.fillStyle = '#fff';
// remove shadow from global
function animate() {
ctx.clearRect(0, 0, w, h);
// draw main circle and glow
ctx.save();
ctx.shadowColor = 'rgba(100, 100, 255, 1)';
ctx.shadowBlur = glow;
ctx.beginPath();
ctx.arc(cx, cy, cx * 0.25, 0, 6.28);
ctx.fill();
ctx.restore();
// draw inner circle
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(cx, cy, cx * 0.23, 0, 6.28);
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
glow += dlt;
if (glow <= 0 || glow >= max) dlt = -dlt;
requestAnimationFrame(animate);
}
The composite operation removes pixels from the next draw operation. By drawing a smaller filled circle on top, you can create an outline of the first circle with its glow effect intact.
View the modified demo here