HTML Canvas - text-shadow not working on Mac?
Here is the code:
var surface = document.getElementById("myCanvas");
if (surface.getContext) {
var context = surface.getContext('2d');
context.shadowOffsetX = 2;
context.shad开发者_如何学PythonowOffsetY = 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/
Looks like safari is broken. If you remove the gradient code then safari correctly adds the text shadow:
http://jsfiddle.net/hv5zR/1/
If you draw the shadow and then draw the gradient over the top it works in safari.... this is a horrible hack but it works:
http://jsfiddle.net/thebeebs/nUbZX/
This bug was just fixed by the following commit: http://trac.webkit.org/changeset/188148
精彩评论