Category Archives: Graphics

Static text fill using HTML5 Canvas.


Making the transparent letter was discussed and source code shown several weeks ago.  Animated Text Fill but no link was created demonstrating the effect. The desired effect is of course to make the text stand out and be read / recalled for a longer period of time. Movement grabs attention. A simple static fill can be used for the

<canvas id="fill" width="960" height="300"></canvas>

In the example created the width is now 400 with a height of 200 the id is now static

<canvas id="static" width="400" height="200"></canvas>

the script to create the static is

<script>
function noise() {
 	var idstatic = document.getElementById("static");
	var ctxstatic = idstatic.getContext("2d");

   	var TempImage = ctxstatic.getImageData(0, 0, 400, 200);
 	var ImgData = TempImage.data;
 	for (var y = 0; y < 200; y += 1) {
		for ( var x = 0 ; x < 400 ; x += 1 ) {
			var i = (x * 4) + (y * 400 * 4);
			r = Math.random();
			var v = 64+(Math.floor(196 * r ));
			ImgData[i] = v;
			ImgData[i+1] = v;
			ImgData[i+2] = v;

			ImgData[i+3] = 255;
		}
 	}
 	ctxstatic.putImageData(TempImage, 0, 0);
	setTimeout(noise, 30);
}

  	noise(); 

</script>
It is being demonstrated at http://wsmith-animations.tk/canvas/
Advertisements

Using Canvas Processing.js to build custom fonts.


When dealing with logos and intellectual property rights (copyrights). It becomes necessary that the font used is not a standard font. You can not for example type your company name in times roman and then get copyright protection for it as a logo. Instead you must build your own font then you can get copyright protection. For either or both the font and the logo.

processing-js allows you to build a font using svg. Then displays text using your custom font. It also allows you to have fonts on your site that do not exist in the computer browser. But there is a limitation – the text is rendered as graphics so it is not seen by search engines. None the less there are many uses for custom fonts not seen by search engines: when somebody logs in to a web 2.0 site their name is normally shown; Shopping cart items are based on a secession with the visitor …

Although the canvas tag renders as a graphic for downward compatibility alternative content (the same words in a normal font) are included on the page – it is up to the search engine if the alternative content is given the same weight as if a canvas tag was not used. It is not a given that it will or will not be – or that search engines will not make adjustments in the future.

Another benefit of using Canvas is the content can be animated to focus the attention of the visitor.

As side notes: True Type Fonts can be converted to SVG fonts using Batik TTF to SVG Convertor. Changing a font into vectors is the first step to changing them into a true 3d object for use in webgl or other 3d animation applications.

SVG animations with IE9 using canvg


Google’s Canvg takes an SVG file and renders it with canvas. May seem like there is no need for this; However, it supports and renders svg animations … IE9 supports SVG and canvas but not SVG animations. With Canvg SVG animations work in IE9

Bypassing mime types using data URI


Developer.Mozilla.org

data URIs, defined by RFC 2397, allow content creators to embed small files inline in documents.

MSDN.microsoft.com

Specifies a data URI, which is a resource, typically an image, embedded in the URI as opposed to one loaded from an external URL.

Why The data: URI Scheme Could Help Save Your Slow Site

This is why reducing the number of HTTP requests a browser needs to make to finish loading a page is a fundamental step in optimizing web sites for speed. One (perhaps underutilized) way to do this is by embedding binary data such as images for oft-used icons inline with other assets using the data: URI scheme.

There are many uses for data uri — I’ve had the need to send html pages by email (sorry don’t know of anybody who has already made an interface to take a complete page content from a URL address and make it into a single file). However with new file formats coming out and many web hosts who have not updated their mimi types — people are having difficulties in implementing some file formats on their web site. Normally not a difficult configuration and should be able to be accomplished by one line in the .htaccess file. However sometimes it may be difficult to reconfig the server.

Resources — converting to base64 can be done with ease online … http://www.opinionatedgeek.com/dotnet/tools/base64encode/

WebGL have and have nots


WebGl is supported in the current beta versions of Chrome and Firefox. Most people who want to get started using webgl can. learningwebgl.com has a step by step process.

Chrome’s beta version installs in a sub directory and does not change or use your current non beta version of chrome. Firefox or minefield from the nightly builds does; although it is not impossible to setup a portable installation in a sub directory or usb stick; But, doing so requires additional steps.

Webgl uses opengl 2.0 which is not the newest version – it is supported by the vast majority of systems. Almost any system which is used for video games has opengl 2.0 or better.

The computers that do not are the ones based on a Intel video driver. ATI does have updates for all of their cards but! But many older laptops use a OEM driver and ATI chipset – those people need to turn to the laptop maker for driver updates.

For firefox there is an alternative to opengl 2.0 installed. The alternative is a software rendering using OSMESA32.DLL.

Software rendering allows webgl to work. However you do not get the same performance increase that comes from a direct interface with the graphics processor unit on the video card.

Using Canvas to give transparencies to Jpeg images


Logos often need to be placed on web pages and often they don’t have a PNG logo with a transparency; Or a jpg image is available but jpg lacks transparencies … Sixrevisions explains this limitation in: JPEG 101: A Crash Course Guide on JPEG … One solution is to copy the web background into an image place it as a background layer in a graphics program and use the darken filter for that layer to allow the background to come through;

Web Developer to designer: Houston we may have a problem! unless the background is an image, It can not be gauranteed that the browser will render the background of the logo image the same as the background on the webpage! … it almost certainly will not across all systems. … this is because of blah, blah, blah.

Canvas to the rescue! I can do the image processing on the browser and everything is pixel perfect! Or even 1/2 pixel perfect!

Anti-aliasing makes a pixel that is 1/2 black and 1/2 white gray. By doing this there is no stair stepping on a pixel level in the image.

Here is an example and the source code:

<!doctype html>

<div style=”background:#eee; width:160px;padding:15px”>

<canvas width=”158″ height=”97″ id=”logo1″>Alternative Logo</canvas>
<canvas width=”158″ height=”97″ id=”logo2″>Alternative Logo</canvas>

</div>

<script>

// setup our canvases

var canvas = document.getElementById(“logo1”);
var context = canvas.getContext(“2d”);

var canvasnew = document.getElementById(“logo2”);
var contextnew = canvasnew.getContext(“2d”);

// get image
var img = new Image();
img.onload = function(){

context.drawImage(img, 0, 0);
contextnew.drawImage(img, 0, 0);

// create the transparency for the jpg by making white transparent

var TheImage = contextnew.getImageData(0, 0, 158, 96);
var jpgdata = TheImage.data;
for (var i = 0, n = jpgdata.length; i < n; i += 4) {
jpgdata[i+3] = 255-jpgdata[i]; // red channel used to set transparency.
}

contextnew.putImageData(TheImage, 0, 0);

}
img.src = ‘logo.jpg’; // Set source path

</script>

Note: contextnew.getImageData triggers a security error if it is used on image data that is from a file on the hard disk … the image must come from a web server and  the same server as the html / script are on.

Color animations and fades, SVG, Canvas, Jquery


Javascript can be used to animate color by calculating the between color values and writing each frame for a element. Canvas is an ideal choice to transform colors in this method because the methods used are standardized. Another alternative is to have two elements one transparent on top which has a key frame  color and use a jquery fade with this element and fade to or from the background element which has the second color.

SVG however is the easiest method —  an SVG tag is used <animateColor id=”a1″ attributeName=”fill” from=”red” to=”blue” dur=”3s”/> which only requires the key-frame values.

HTML5 textured word art using canvas


CSS methods of creating a texture for words normally involves creating an image that has a transparency and placing it on top of the text. This method has many limitations. Canvas allows image processing on the fly and can create much richer textures. Here is an example for gold lettering.

<!DOCTYPE html>
<html>
<head>
<title>wsmithdesign, textured word art using canvas </title>

</head>

<body>

<img src=”gold-texture.jpg” width=”1″ id=”gold” />

<div style=”background:#224488″ id=”areawrap”>
<canvas id=”area” width=”550″ height=”75″>
<h1>Path Ways Learning</h1>
</canvas>
</div>

<script>

window.onload = function() {

We need to wait until the graphics is loaded.

// first we write the text.
var canvas = document.getElementById(“area”);
var context = canvas.getContext(“2d”);

When the letters are rendered onto the canvas the edges are softened but a transparency may not used with all browsers; so we will need to process the image to recreate the transparency. We will do this by writing red text on a black background the color red will then be our mask and set the transparency on the edges.

// recreate transparency layer

context.fillStyle =”#000000″;
context.fillRect(0,0,550,75);

context.font =  “40px Ariel”;
context.fillStyle = “#ff0000”;
context.fillText(“Path Ways Learning”, 10, 50);

Now the text image is created and ready to be processed.

// get text
var lettersImage = context.getImageData(0, 0, 550, 75);
var pix = lettersImage.data;

The texture will be the gold leaf image.

// get texture
var gold = document.getElementById(“gold”);
context.drawImage(gold, 0, 0, 550, 75);
var goldImage = context.getImageData(0, 0, 550, 75);
// Image must be on same domain as html!
var colors = goldImage.data;

Now we create an image using our texture and the red channel of the lettering for our transparency.

// apply texture to lettersImage

for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i+3] = pix[i];
pix[i  ] = colors[i  ] ;     // red
pix[i+1] = colors[i+1] ;     // green
pix[i+2] = colors[i+2] ;     // blue

}

Draw the completed image.

context.putImageData(lettersImage, 0, 0);

}
</script>
</body>
</html>

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>

Create Web 2.0 style icons by adding a CSS class.



CVI glossy.js uses the html5 canvas element. This element is already supported by most modern browsers. What canvas allows you to do is image processing on the browser side. What glossy script does is it takes any image, which has the class style of glossy, and goes through the steps that one would do in photoshop to create a glossy web 2.0 image or vista type button.

One thing this technology does is allows users to upload a graphic to their space and apply graphics processing to it provided by the site. Another thing it does is saves time by allowing whatever graphics steps that a web designer goes through for each graphic to be done instead by assigning a class to the image in the markup process.

As a current example I am using it on Sdfreelance

Note: for backwards compatibility glossy.js is using schemas-microsoft-com:vml not just canvas.