RSS logo with <canvas>

Elaborate

Actually, the background of our gif is not simply orange. We need a gradient (again from top left to bottom right):


var gradient = ctx.createLinearGradient(0,0,24,24);

gradient.addColorStop(0, 'rgb(236,138,68)');

gradient.addColorStop(0.5, 'rgb(252,158,60)');

gradient.addColorStop(1, 'rgb(220,98,44)');

We start with our background color (0), take a nice lighter orange for the middle (0.5) and a darker one for the end (1). Then we simply define the gradient as our fillStyle.

ctx.fillStyle = gradient;

Elaborate II

»But our logo has rounded corners. How do we make those?«
Answer: Not at all! To the canvas element a rectangle is a rectangle is a rectangle.

We have the draw the shape ourselves:


ctx.beginPath();

ctx.moveTo(0,5);

ctx.quadraticCurveTo(0,0,5,0);

ctx.lineTo(19,0);

ctx.quadraticCurveTo(24,0,24,5);

ctx.lineTo(24,19);

ctx.quadraticCurveTo(24,24,19,24);

ctx.lineTo(5,24);

ctx.quadraticCurveTo(0,24,0,19);

ctx.fill();

We start at the very left, five pixels under the very top (0,5). From there we arch to a point at the very top five pixels from the left (5,0). Control point for the curve is the top left corner (0,0). Then we draw a line until five pixels from the right (19,0), curve down again aso asf. After we take the last corner ctx.fill() will take over - we do not need to draw a line to the starting point.

Internet Explorer

Seasoned developers will ask: »And what does it look like in IE?« Well, something like this:

Yes, nothing. IE8 is very good at handling HTML but does not understand HTML5, yet. So what are we to do? Nice people at Google have written a script that translates new things into VML commands, which IE understands. All we have to do is upload it onto our webspace and include it into the head just before our script block:

We have done this from the very beginning, so these instructions were readable for users of IE as well.

Final Remarks

The canvas element could be used to draw your logo, thus obsoleting the need for image files, which often show up in the browser with some annoying delay. Or the other way round: You do not have to be tricky to have the page wait until the images have arrived. You could have your logo displayed right from the start.
Of course, if JavaScript is not active in the browser you will not see any canvas.
It will take a while till HTML5 is a standard. Things can be changed anytime.
Excanvas.js for IE works quite well but the interpreting of the JavaScript takes its time. Very tricky code will only run in slow motion. We can only hope that the next version of IE understands HTML5.
All major browsers support HTML5 by now. As it is still in development there are differences in how it is handled.