{"id":1479,"date":"2010-09-16T22:21:00","date_gmt":"2010-09-17T04:21:00","guid":{"rendered":"http:\/\/www.evolutionarydesigns.net\/blog\/2010\/09\/16\/use-html5-canvas-elemnt-to-create-graphic-text\/"},"modified":"2010-09-17T23:11:54","modified_gmt":"2010-09-18T05:11:54","slug":"use-html5-canvas-elemnt-to-create-graphic-text","status":"publish","type":"post","link":"http:\/\/www.evolutionarydesigns.net\/blog\/2010\/09\/16\/use-html5-canvas-elemnt-to-create-graphic-text\/","title":{"rendered":"Use HTML5 Canvas Element to Create Graphic Text"},"content":{"rendered":"

\"Firefox\"<\/a> 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.<\/p>\n

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\u2019s 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\u00a0 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. <\/code><\/p>\n

NOTE:<\/span> 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.<\/strong><\/p>\n

Click Here to View the Demo<\/a><\/p>\n

Example Code<\/h3>\n

[js]
\n<canvas id="textCanvas" width="650" height="150"><\/canvas>
\n<script type="text\/javascript">
\nvar textcanvas, textgraphics;
\nfunction textdraw_init() {
\ntextcanvas = document.getElementById(‘textCanvas’);
\nif (textcanvas.getContext){
\ntextgraphics = textcanvas.getContext(‘2d’);
\n}
\ntextdraw();
\n}
\nfunction textdraw() {
\nvar texttheme = ["#000000","#001AFF","#3B00FF","#F7F7F","#3F00FF"];
\nvar textfont = ["Arial","Times New Roman","Comic Sans MS","Papyrus","Baskerville"];
\nvar x = Math.random() * 650;
\nvar y = Math.random() * 150;
\nvar size = (Math.random() * 50) + 10;
\ntextgraphics.font = size+"px ‘"+textfont[ (Math.random() * 5 >> 0)]+"’";
\nif (Math.random() > .5) {
\ntextgraphics.fillStyle = texttheme[ (Math.random() * 5 >> 0)];
\ntextgraphics.fillText("Evolutionary Designs", x, y);
\n} else {
\ntextgraphics.strokeStyle = texttheme[ (Math.random() * 5 >> 0)];
\ntextgraphics.strokeText("Evolutionary Designs", x, y);
\n}<\/p>\n

t = setTimeout(‘textdraw()’,950);
\n}
\ntextdraw_init();
\n<\/script>
\n[\/js]<\/p>\n

Demo Code<\/h3>\n

[html]
\n<html>
\n<head>
\n<title>Canvas Text Demo and Tutorial<\/Title>
\n<meta http-equiv="Content-Type" content="text\/html; charset=utf-8"><style type="text\/css">
\n<!–
\nh1 {
\nfont-size: 36px;
\n}
\n–>
\n<\/style><\/head>
\n<body>
\n<h1 align="left">Canvas Text Demo and Tutorial <\/h1>
\n<\/div>
\n<canvas id="textCanvas" width="650" height="150"><\/canvas><\/p>\n

<div align="left">
\n<script type="text\/javascript">
\nvar textcanvas, textgraphics;
\nfunction textdraw_init() {
\ntextcanvas = document.getElementById(‘textCanvas’);
\nif (textcanvas.getContext){
\ntextgraphics = textcanvas.getContext(‘2d’);
\n}
\ntextdraw();
\n}
\nfunction textdraw() {
\nvar texttheme = ["#000000","#001AFF","#3B00FF","#F7F7F","#3F00FF"];
\nvar textfont = ["Arial","Times New Roman","Comic Sans MS","Papyrus","Baskerville"];
\nvar x = Math.random() * 650;
\nvar y = Math.random() * 150;
\nvar size = (Math.random() * 50) + 10;
\ntextgraphics.font = size+"px ‘"+textfont[ (Math.random() * 5 >> 0)]+"’";
\nif (Math.random() > .5) {
\ntextgraphics.fillStyle = texttheme[ (Math.random() * 5 >> 0)];
\ntextgraphics.fillText("Evolutionary Designs", x, y);
\n} else {
\ntextgraphics.strokeStyle = texttheme[ (Math.random() * 5 >> 0)];
\ntextgraphics.strokeText("Evolutionary Designs", x, y);
\n}<\/p>\n

t = setTimeout(‘textdraw()’,950);
\n}
\ntextdraw_init();
\n<\/script><\/p>\n

<\/div>
\n<\/body>
\n<\/html><\/p>\n

[\/html]<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[597,359,598,599,133],"class_list":["post-1479","post","type-post","status-publish","format-standard","hentry","category-web-design","tag-canvas-text-element","tag-html5","tag-html5-graphics","tag-html5-snippets","tag-javascript","entry","has-post-thumbnail"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pJPdG-nR","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/1479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/comments?post=1479"}],"version-history":[{"count":0,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/1479\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/media?parent=1479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/categories?post=1479"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/tags?post=1479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}