Category Archives: Canvas

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

The question of what can you do with flash and not html5 is now mute.


Google has released a web tool that converts SWF 8 and ActionScript 2.0 into a html5 document that will work with devices that do not have a Flash player (such as iPhones and iPads).

http://swiffy.googlelabs.com/

Now the 3d animation wars are starting to heat up.

Animated text fill using HTML5 Canvas


fillStyle with the opacity set to zero will not (using fillText) poke a hole to the html layer underneath. None the less using green screening it is possible to make transparent lettering so that the fill of the lettering can be animated.

The HTML I will use for this example is …

<style>
#green, #fill, #top{
	position:absolute;
	top:0px;
	left:0px;
}
#wrapper {
	position:relative;
	width:960px;
	height:300px;
}
</style>
<div id="wrapper">
<canvas id="green" width="960" height="300"></canvas>
<canvas id="fill" width="960" height="300"></canvas>
<canvas id="top" width="960" height="300"></canvas>
</div>

Three canvas elements are not needed but it makes the process easy to visualize and troubleshoot.

For the proof of concept all that is needed is a plain fill –

<script>
	var canvasfill = document.getElementById('fill');
 	var ctxfill = canvasfill.getContext('2d');

	ctxfill.fillStyle = "#88f";
	ctxfill.fillRect(0,0,960,300);
</script>

The fill can be any html content or video. The background for the main canvas will start as white – it really does not matter because when we do the lettering the only thing that will change is that certain pixels will become transparent.

<script>
	var canvastop = document.getElementById('top');
 	var ctxtop = canvastop.getContext('2d');

	ctxtop.fillStyle = "#fff";
	ctxtop.fillRect(0,0,960,300);
</script>

Black lettering on a white background produce the best anti-aliasing results. Anti-aliasing removes pixel level corners.

<script>
	var canvasgreen = document.getElementById('green');
 	var ctxgreen = canvasgreen.getContext('2d') ;

// antialiasing works best with black letters on a white background.

	ctxgreen.fillStyle = "#ffffff";
	ctxgreen.fillRect(0,0,960,300);

 	ctxgreen.fillStyle = "#000000";
 	ctxgreen.font = "60px Arial";
 	ctxgreen.fillText("Transparent text shows",25,100);
 	ctxgreen.fillText("Animatable fill layer",25,200);
</script>

The function that is called to make the black lettering transparent only needs to copy the green channel from the green screening canvas to the apha channel of the top canvas.

<script>
// moves ctxgreen green channel to the alpha channel of ctxTop
function BlackTransparent() {

	var sourceimg = ctxgreen.getImageData(0, 0, 960, 300);
	var sourcedata = sourceimg.data;
	var targetimg = ctxtop.getImageData(0, 0, 960, 300);
	var targetdata = targetimg.data;

	for (var i = 0, n = sourcedata.length; i < n; i += 4) {
		targetdata[i+3] = sourcedata[i+1];
	}
	ctxtop.putImageData(targetimg , 0, 0);

}
BlackTransparent()
</script>

That is it.

All that is left to do is animate the fill canvas to create text effects better than those seen on TV which are beginning to look more and more like web sites everyday.

Using HTML5 Canvas image animation on facebook pages


To use (animate) HTML5 canvas images on facebook the images need to be converted to base64 – Base 64 encoder and use a data uri for the image – because the Canvas requires the image come from the same domain as the html5 script and when using facebook with iframes the domain for the image on facebook would not be the same domain as the iframe or fbml domain … CDN are in use with facebook images.

Update: Progressive Content – Ajax on facebook

One of the differences between the old and the new facebook API is Iframes. By using Iframes content can be used from any host where one can place a 520 x 800 (or with 8 pixel margin 504 x 784) document. The limitations of content is limited only by facebook policy. If there is something in the older API that can not be done with the newer API I am at a lose to identify it — other than the difference it makes for SEO.

HTML5 Canvas Animated Fire menu button


Fire animation is accomplished by having a loop image rotate and become transparent as it gets to the top. Each frame is made by hand or in this case by HTML5 Canvas.  Like the last post an example is posted on http://wsmith-animations.tk/

The fire loop is nothing but a photoshop cloud rendering with red and transparent. Then the top 1/2 is copied to the clip board and the image flipped then the top is placed back on the top 1/2 giving a mirror image on the top and bottom of the image.

<style>

.fire-button {

background:#aaf;

width:150px;

height:

40px;

position:relative;

}

.fire-button div {

position:absolute;

top:0px;

left:0px;

}

#offset {

top:10px;

left:30px;

}

</style>
<div class=”fire-button”>

<div>

<canvas id=”fire” width=”150″ height=”40″></canvas>

</div>

<div id=”offset”>

Hot Item

</div>

</div>

<img id=”fire-source” src=”fire.png” style=”float:right; display:none;”>

<script>

function Fire() {

// var fire1 = document.getElementById(“fire-source”);
var top = fireframe+560;
cfire.fillRect(0,0,150,40);

if (fireframe < 40) {

cfire.drawImage(fire1, 0,600+fireframe-40,200,40-fireframe, 0,0,150,40-fireframe);
cfire.drawImage(fire1, 0,0,200,fireframe,  0,40-fireframe,150,fireframe);

}
if (fireframe > 39 ) {

cfire.drawImage(fire1, 0,fireframe-40,200,40, 0,0,150,40);

}

if (fireframe == 600)  {

fireframe = 0;

}

// Fire fades as it rises

var TheImage = cfire.getImageData(0, 0, 150, 40);
var jpgdata = TheImage.data;

for (var y = 0; y < 40; y += 1) {

progress = 1 – ( ( 40 – y ) / 39 );

for ( var x = 0 ; x < 150 ; x += 1 ) {

i = (x * 4) + (y * 150 * 4);

jpgdata[i+3] = jpgdata[i+3] * progress;

}

}

cfire.putImageData(TheImage, 0, 0);
fireframe++;
setTimeout(Fire, 25);
}

</script>

<script >

var fireframe = 0;
var fire1 = document.getElementById(“fire-source”);
var canvas = document.getElementById(‘fire’);

if (canvas.getContext) {

var cfire = canvas.getContext(‘2d’);
cfire.fillStyle = “rgba(0,0,0,0)”;
cfire.fillRect(0,0,150,40);
Fire();

}

</script>

Animated menu buttons with html5 canvas.


Watching baseball yesterday they had many different video effects for the various text element boxes. Many of them are based on a sweep of light or a path of light across the element to bring attention to it. Canvas can do these effects very easily … below is the source code and the example is on http://wsmith-animations.tk/

By having the button animation be part of the page that means that interaction with another element of the screen can start the event.
<style>

/* button needs to have position relative to hold overlaying content */

.button {

width:160px;

height:45px;

background:#800;

color:white;

position:relative;

}

/* button divides both start at zero top and left inside the .button class divide */

.button div {

position:absolute;

top:0px;

left:0px;

padding:0px;

}

/* text is offset in the button note item CSS overrides class CSS */

#textOffset {

top:10px;

left:10px;

}

</style>
<div>

<div> <canvas id=”canvas1″ width=”160″ height=”45″>

<!– canvas width sets both CSS and width for javascript (they can be different) –>

</canvas>

</div>

<div id=”textOffset” >

Item

</div>

</div>
<script >
// set up loop
function newFrame() {

frame++;

if (frame > 300) { frame = 0; }

// slow fade: lower alpha by 16 every 25 milliseconds

var TheImage = ctx1.getImageData(0, 0, 160, 45);

var jpgdata = TheImage.data;

for (var i = 0, n = jpgdata.length; i < n; i += 4) {

jpgdata[i+3] = jpgdata[i+3]-16;

if (jpgdata[i+3] < 0) { jpgdata[i+3] = 0 }

}

ctx1.putImageData(TheImage, 0, 0);

// draw box at frames 101 though 120 progressive from left to right based on frame count.

if (frame > 100 && frame < 121) {

var left = (frame – 101) * 8 ;

ctx1.fillStyle = “rgb(0,0,255)”;

ctx1.fillRect(left,0,8,45);

}

setTimeout(newFrame, 25); // max fps is 40

}

// test for canvas setup and begin animation loop if exists.

var Canvas1 = document.getElementById(‘canvas1’);

if (canvas1.getContext){

var ctx1 = canvas1.getContext(‘2d’);

var frame = 0;

newFrame();

}
</script>

Changing the aspect ratio of html5 video.


You can not directly change the video aspect of a video in a html5 video tag; however you can read the video (assuming it is on the same domain) and place it into a canvas … first create a canvas to hold the aspect ratio of the video 640 x 480 and use the style to size it in this case to a 100 x 100 box.

<canvas id=”processCanvas” height=”480″ width=”640″ style=”width:100px; height:100px”>

</canvas>

Now use straight javascript with canvas functions to copy the video from the video tag onto the canvas.

function draw( )

{

gold = document.getElementById(‘vid’);

process.drawImage(gold, 0,0,640,480);

}

var canvas = document.getElementById(‘processCanvas’);

var process = canvas.getContext(‘2d’);

setInterval ( “draw()”, 30 );

The aspect has now been changed from 640×480 to a 1 by 1 aspect or any other aspect ratio that I need. And is displayed in the canvas tag.

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

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.