HTML5 Advertisements

Tucker — Sun, 09 May 2010 18:12:05 +0000

Flash sucks, all it’s good for is flashing advertisements.

If Flash didn’t exist and HTML5 was the standard, what format would advertisers use? Here’s an example of the future in HTML5 Canvas (great tutorial here Mozilla Canvas tutorial).

HTML5 Ad:

Overall it was fairly easy and intuitive to create – the hardest part was integrating it into a WordPress Post! It works in Chrome (minus the audio), looks slightly different in Firefox, and doesn’t work at all in IE. Unfortunately, we won’t be seeing many of these ads until its browser penetration and development tools improve. Maybe it is Adobe’s fault for making it too easy?

Javascript portion:

function start(){
	// Redraw the canvas every 80 ms
	setInterval(draw,80);
 
	// Add event listener for mouse over / mouse click
	canvas.addEventListener('mousemove', onMouseMove, false);
	canvas.addEventListener('click', onMouseClick, false);
}
 
function draw()
{
	var ctx = document.getElementById('canvas').getContext('2d');
 
	// Draw rectangle
	ctx.fillStyle = getRandomColor();
	ctx.clearRect(0,0,300,100); // clear canvas
	ctx.fillRect(0,0,300,100);  
 
	// Outer border
	ctx.lineWidth = 2;
	ctx.strokeRect(1,1,298,98);
 
	// Draw text
	ctx.fillStyle = 'white';
	ctx.textBaseline = 'top';
	ctx.font = 'bold 40px sans-serif';
	ctx.fillText('YOU WIN!!!', 40, 30);
	ctx.strokeText('YOU WIN!!!', 40, 30);
 
}
 
function onMouseClick(ev)
{
	window.location.href = 'http://www.google.com';
}			
 
function onMouseMove(ev)
{
	// Play Audio
	document.getElementById('audio').play();
}
 
function getRandomColor()
{
	var r = Math.floor(Math.random()*256);
	var g = Math.floor(Math.random()*256);
	var b = Math.floor(Math.random()*256);
	return "rgb(" + r + "," + g + "," + b + ")";
}

Tucker Watson» HTML5

HTML5 Advertisements

Javascript portion: