HTML Canvas - text shadow not working on Mac?

Question

Here is the code:

var surface = document.getElementById("myCanvas"); if (surface.getContext) { var context = surface.getContext('2d'); context.shadowOffsetX = 2; context.shadowOffsetY = 2; context.shadowBlur = 5; context.shadowColor = "rgba(0, 0, 0, 0.5)"; context.textBaseline = "top"; context.font = "125px helvetica"; context.textAlign = "center"; var gradient = context.createLinearGradient(0, 0, 0, 150); gradient.addColorStop(0, "rgb(22,28,106)"); gradient.addColorStop(1, "rgb(19,25,98)"); context.fillStyle = gradient; context.fillText("Some Title", 450, 10); } 

the shadow just looks like a 1px outline ... any ideas?

Live demo: http://jsfiddle.net/simevidas/MDgR3/

Answer 1

It seems the safari is broken. If you remove the gradient code, then safari will correctly add the shadow of the text:

http://jsfiddle.net/hv5zR/1/

If you draw a shadow and then draw a gradient over the top, it works in safari ... it's a terrible hack, but it works:

http://jsfiddle.net/thebeebs/nUbZX/

Answer 2

This error was only fixed with the following commit: http://trac.webkit.org/changeset/188148