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, up to IE8 something like this:
Yes, nothing. IE8 does not understand HTML5, yet. But for Windows XP, there is no newer version. So what are we to do? Nice people at Google have written a script that translates 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:
<!--[if lt IE 9 IE]><script src="excanvas.js"></script><![endif]-->
We have done this from the very beginning, so these examples were readable for users of IE8 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.
- 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.
Download
The finished file with the final version of the code and complete HTML is available for download.
In order to use the file in IE you need to download the excanvas script mentioned above.