Question

I’m trying to draw a string with a background on a HTML5 canvas. I’m using the GMail favicon as an example, see this picture (from the labs settings page):

As you can see, the 8 in the picture has a white glow around it. Here’s what I’ve tried so far:

var notstring = notifications.toString();
var xpos = 14;
xpos -= (5 * notstring.length);

//Draw background
ctx.font = "15px sans-serif";
ctx.globalAlpha = 0.5;
ctx.fillStyle = "white";
//ctx.fillRect(xpos, 9, (5 * notstring.length) + 2, 7);
ctx.fillText(notstring, xpos - 1, 17);

//Draw text
ctx.font = "10px sans-serif";
ctx.globalAlpha = 1;
ctx.fillStyle = "black";
ctx.fillText(notstring, xpos, 15);

As you can see I’ve tried drawing a rectangle behind it, that didn’t look good, and text with a different font size, this looked better, but didn’t give the fading.

Answer 1

“Faded out background” pretty much exactly describes a shadow, so use a shadow to get that effect! Play with the parameters until you’re happy with the result:

http://jsfiddle.net/ksrfY/

ctx.shadowColor = 'lime';
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.shadowBlur = 8;

ctx.font = '20pt Verdana';
ctx.fillText('8', 50, 50);

Set the offsets to 0,0 for a “perfect” background, like:

ctx.shadowColor = 'red';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 5;

http://jsfiddle.net/ksrfY/5/