Today is a good day to code

HTML 5 Canvas Tag on the iPhone

Posted: December 31st, 1969 | Author: | Filed under: iPhone, Uncategorized | Tags: | No Comments »

HTML 5 Canvas Tag on the iPhone

Picture of IrvinRecently I've been playing around with using the canvas tag in some of my applications. This is a truly cool tag. I know that SVG does just about everything that the canvas tag does, but I like the way JavaScript works with it.

What I have been trying to do is to create a reflection for an image. Obviously this does not work in IE, but most every other browser should support it.

function rotateCanvas(canvas_id,url,alt,title){
var image = document.createElement(“img”);
image.src = url;
image.title = title;
image.alt = alt;
var myCanvas = document.getElementById(canvas_id);
myCanvas.zIndex = 4;
myCanvas.style.margin = “0px”;
myCanvas.style.padding = “0px”;
var context = myCanvas.getContext(“2d”);
context.rotate(Math.PI);
context.drawImage(image,-288,-209);
var gradientObject = context.createLinearGradient(-88, -209, 0, 230);
gradientObject.addColorStop(0,”rgba(0,0,0,1)”);
gradientObject.addColorStop(1,”rgba(0,0,0,0.6)”);
context.fillStyle = gradientObject;
context.fillRect(-288,-209,400,230);
}

That code will flip an image object over and display it in the canvas of your choice. This tag puts many of the transformations that we are all doing now with strange Microsoft ActiveX commands, and server side scripts. If CSS and JavaScript keep going in this direction, we could have a very powerful client language on our hands.

The one strange thing is that I think Apple still holds the patent on this or something, so it is holding up the whatwg process of ratifying HTML 5. Here are the references I have been using to do this stuff:

Apple Canvas Tag Reference

Mozilla Firefox Canvas Tag Tutorial

The whatwg mail list for the canvas tag

Neon Dragon: reflection.js