Skip to content

Instantly share code, notes, and snippets.

@MarcBalaban
Created April 22, 2016 14:55
Show Gist options
  • Save MarcBalaban/4af30e20f3905040537387095d10ba8e to your computer and use it in GitHub Desktop.
Save MarcBalaban/4af30e20f3905040537387095d10ba8e to your computer and use it in GitHub Desktop.
/**
* italic
*
* Tests whether the browser supports faux-italic text in canvas when
* the font itself does not have an italic version (or else the italic
* version has not been loaded into memory).
*
* I do this by using the native font Impact, which does not have a bold
* or italic version, drawing it to a canvas, and checking whether
* anything about the canvas bit-data is different.
*
* @see http://stackoverflow.com/questions/14489363/detect-bold-and-italic-support
* @see http://stackoverflow.com/questions/15128803/cannot-draw-italic-text-in-firefox-canvas
* @access public
* @return Boolean
*/
italic: function () {
if (_italic === undefined) {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
raw = {};
canvas.width = 1000;
canvas.height = 30;
context.font = 'normal 16px impact';
context.fillText('string', 10, 20);
raw.normal = canvas.toDataURL('image/png');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = 'italic 16px impact';
context.fillText('string', 10, 20);
raw.italic = canvas.toDataURL('image/png');
_italic = raw.normal !== raw.italic;
}
return _italic;
}
};
})();
// 0
// 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment