logo of blechtrottel.net blechtrottel.net
Deutsch

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

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.

zurückTeil1 - Teil2