It appears that when text is placed on top of a canvas element, Chrome enforces hardware-accelerated transforms.
Could someone provide insight into this behavior? My goal is to resize text over a canvas element without it being transformed into a texture.
You can view the issue in action on this fiddle: http://jsfiddle.net/Gb6h4/1/
Below is the code snippet:
// Access the canvas and its context
var $canvas = $("canvas");
var ctx = $canvas[0].getContext('2d');
// Make the canvas fit the entire screen
var width = $(window).width(),
height = $(window).height();
$canvas.attr({
width: width,
height: height
});
// When modifying the canvas context in Chrome,
// it triggers a hardware-accelerated transform on the text.
// (The text is scaled as a texture, causing blurriness.)
// Uncomment the line below to see the difference.
// ctx.fillStyle = "grey";
// Implement a basic zoom animation on our "Hello!" div
var $div = $(".transformed");
var scale = 1;
setInterval(function () {
scale += 0.005;
$div.css({
transform: "translate(0px, 0px) scale("+scale+")"
});
}, 16);
In the fiddle, the text initially scales correctly (using a non-accelerated CSS transform). However, after interaction with the canvas context, the text scaling changes (as if under an accelerated transform).