Downloading fonts for HTML5 Canvas


Canvas changes text into graphics and allows these “images” to be processed in the browser — with pixel manipulations the text effects are endless. Text art without canvas normally requires the text to be photoshopped; this means the only text that can be artified is text that is already known not dynamic information; photoshopped text art also takes information away from search engines and increases download time.

The most commonly used fonts are the ones that exist on the browser’s computer. However these are limited and the web designer can not guarantee what fonts exist. Fonts can be downloaded and these downloaded fonts can be used by Canvas – it just needs to wait until after the font is downloaded. Here is how that can be done.


<!DOCTYPE html>
<html>
<head>
<title>wsmithdesign, text art, canvas, fonts </title>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<style>h1 {color:#ddd;padding: 25px;font-family: 'Crimson Text', arial, serif; }</style>
</head>

<body>

<div>
<canvas id=”canvas” width=”250″ height=”250″>
<h1>Hello World</h1>
</canvas>
</div>

<script>

window.onload = function() {
var canvas = document.getElementById(‘canvas’);
var ctx = canvas.getContext(‘2d’);
ctx.fillStyle = ‘#000′;
ctx.font = ’22px Crimson Text’;
ctx.fillText(‘Hello world!’, 30, 30);
}

</script>

<h1>.</h1>

<!– need to use font to make sure it is downloaded for all browsers –>

</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: