Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.
In this installment of the HTML5 canvas element I want to show you another cool graphic that you can use on your site. This usage of the canvas tool is a little different. Instead of drawing a graphic with shapes, you can use the canvas element to draw text graphics.
I came across this example a few weeks go and thought I would share it with you. If you know JavaScript, you can easily go into the code and modify it. If not you can go in and change the color theme, fonts and the size of the palette. But it’s really easy to change the colors by changing the var textthem. The color is code using the hexadecimal numbers and then you can change the font by changing the variables on textfont to different. If you want to change the size of the canvas, you can do this by changing canvas size and the var x = Math.random() * 650; and var y = Math.random() * 150; The x and y numbers (650 and 150)are the numbers you can change. The x will change the horizontal of an image and y will change the height of the image.
NOTE: As the writing of this article, there is not an option to download new web fonts. It safe to use fonts that comes by default on all computers.
Example Code
[js]
<canvas id="textCanvas" width="650" height="150"></canvas>
<script type="text/javascript">
var textcanvas, textgraphics;
function textdraw_init() {
textcanvas = document.getElementById(‘textCanvas’);
if (textcanvas.getContext){
textgraphics = textcanvas.getContext(‘2d’);
}
textdraw();
}
function textdraw() {
var texttheme = ["#000000","#001AFF","#3B00FF","#F7F7F","#3F00FF"];
var textfont = ["Arial","Times New Roman","Comic Sans MS","Papyrus","Baskerville"];
var x = Math.random() * 650;
var y = Math.random() * 150;
var size = (Math.random() * 50) + 10;
textgraphics.font = size+"px ‘"+textfont[ (Math.random() * 5 >> 0)]+"’";
if (Math.random() > .5) {
textgraphics.fillStyle = texttheme[ (Math.random() * 5 >> 0)];
textgraphics.fillText("Evolutionary Designs", x, y);
} else {
textgraphics.strokeStyle = texttheme[ (Math.random() * 5 >> 0)];
textgraphics.strokeText("Evolutionary Designs", x, y);
}
t = setTimeout(‘textdraw()’,950);
}
textdraw_init();
</script>
[/js]
Demo Code
[html]
<html>
<head>
<title>Canvas Text Demo and Tutorial</Title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
<!–
h1 {
font-size: 36px;
}
–>
</style></head>
<body>
<h1 align="left">Canvas Text Demo and Tutorial </h1>
</div>
<canvas id="textCanvas" width="650" height="150"></canvas>
<div align="left">
<script type="text/javascript">
var textcanvas, textgraphics;
function textdraw_init() {
textcanvas = document.getElementById(‘textCanvas’);
if (textcanvas.getContext){
textgraphics = textcanvas.getContext(‘2d’);
}
textdraw();
}
function textdraw() {
var texttheme = ["#000000","#001AFF","#3B00FF","#F7F7F","#3F00FF"];
var textfont = ["Arial","Times New Roman","Comic Sans MS","Papyrus","Baskerville"];
var x = Math.random() * 650;
var y = Math.random() * 150;
var size = (Math.random() * 50) + 10;
textgraphics.font = size+"px ‘"+textfont[ (Math.random() * 5 >> 0)]+"’";
if (Math.random() > .5) {
textgraphics.fillStyle = texttheme[ (Math.random() * 5 >> 0)];
textgraphics.fillText("Evolutionary Designs", x, y);
} else {
textgraphics.strokeStyle = texttheme[ (Math.random() * 5 >> 0)];
textgraphics.strokeText("Evolutionary Designs", x, y);
}
t = setTimeout(‘textdraw()’,950);
}
textdraw_init();
</script>
</div>
</body>
</html>
[/html]
About James
Thank you for sharing this, James! I’m not much into HTML, but will definitely try this out!
Very cool James. I’ll have to give it a shot and get starting with HTML5. It’s scary to think about learning something new, but it has to be done sometime.
It really isn’t all that hard, it just takes time and a little understanding of the code. I am still learning…
I didn’t have a chance to use any of HTML5 cool features, because I guess I’m concerned about browser compatibility issues. I really should starting using the patches for making older browser compatible (like canvasEx for example).
Cool review, James.
I haven’t really messed with much. Mostly just playing around. Like you, I want to keep things compatible…
Did you know that the Basic HTML Color set is a combination of 216 color? You can find a tabulated view of the basic HTML color on the internet. It can be handy when you need to quickly choose a standard HTML color for your site or any other project.