Steve Fitzpatrick

You can use HTML5's Canvas to create dynamic images in the browser.  No server processing needed.

In a past life as a despot on a football forum, I used to create emoticons for players at the club.  I'd put them together in Photoshop, save them and then upload them to the server.  There was sufficient faffing around that when faced with six or seven to do, I never quite got around to it.

While reading the excellent book Introducing HTML5 I found out that the content of a canvas element (onto which you can overlay almost anything) can be converted to a single image with a single command.  Awesome.

Here is the example (by Remy Sharp) http://introducinghtml5.com/examples/ch05/todataurl.html

And this is what I managed to put together.  It's experimental, so you WILL NEED either Chrome (recommended), Safari or Opera to see it working.
http://celticend.co.uk/icons/

So, what's going on?

Inputs
Nothing of note going on here... just using a traditional form to capture some data.

There are two things of interest here.

Firstly, I am using the HTML5 placeholder attribute to show "Player Surname" in the input box.  This will populate an input box with greyed out text which disappears on focus.  Obviously, it's not supported by all browsers at the moment, but is a nice touch when it doesn't have to work across them all.

Secondly, the value of the select field relates to the CCTLD country code for each flag that I have on my server.  Annoyingly (but understandably), canvas will throw a security error if you try to convert it to an image when it contains another image that is sourced from an external site.  For instance, if you use a dynamic Google Chart in your canvas, you will not be allowed to then convert that canvas to a flat image.

The Output
When you fill out the details, you are rewarded with your image.  And that is an image, a bona fide right-click-and-save-as image.  Created completely in the user's browser.

How does it work?
The image at the bottom is just that, an image.  To get to that stage, I've had to

• Read the inputs from the form
• Draw the background boxes onto the canvas element
• Draw the text on the canvas element
• Show the element containing my output image
• Convert the canvas to an image SRC and attach that to the output image

Note, the image that you see there isn't the canvas element, that's hidden on the page throughout.  But it looks identical.

Viewing the code
You can have a look at the code in the page source for the example. It's very self-explanatory. 

The nicest bit is the convert-to-image, and this piece of code deals with that particular magic

If there's demand, I can go through each step.
view-source:http://celticend.co.uk/icons/

Love

Hey flag-fans, 

As always, source code is here: http://stevefitzpatrick.co.uk/demos/flags/

Playing with HTML and CSS to create flags out of nothing has been great fun, especially when it leads me to discover tags and elements that I had never previously happened upon.

While putting together The Gambia flag, I was convinced that I could somehow draw five different stripes by using a single HTML div.  And I've found out how.

OUTLINE
I found the CSS "Outline" tag while using the excellent http://css3generator.com . It's a CSS2 tag, but I'd never really noticed it before, what with IE completely ignoring its existence since ever.

Layman-ly it allows you to put a second border around your element.  And I've used this to create a double-border effect and draw a North Korea flag.

HTML
    <div id="north-korea" class="flag" title="North Korea">
        <div class="stripes"></div>
    </div>

CSS
    #north-korea .stripes{
        top: 33px; /* The box doesn't start at the offset tag, but the old-style border. */

                height: 122px; width: 300px;  /* Red bit is 122px high */

        background: #ed1d25;  /* Red background */

        border-top: 6px solid #fff;  /* Top white border    */
        border-bottom: 6px solid #fff;  /* Bottom white border */

        outline: 33px solid #034da2;  /* Top and bottom blue bits.  Left and right do exist, but my main flag has an overflow: hidden (see below) */
    }

    .flag{
        display: block; position: relative;
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        float: left;
        margin: 0 20px 20px 0;
        overflow: hidden;
        background: #fff;
    }

So, there you have it, a nice new CSS rule for me to abuse.

And here's the finished CSS/HTML-only North Korea flag. 

Love and beer.

All flags: http://stevefitzpatrick.co.uk/demos/flags/

To get this far, I've had to click here:

Ignore the "Change" button shouting for my attention

Fill out this:

And after all of that I now have to choose between three tightly-packed buttons, each with very different consequences:

Feel free to have a super-alpha play with my new toy

http://close.st/

You can search for things near you by adding in that thing at the end of the URL...

http://close.st/kebab
http://close.st/station
http://close.st//HMV 
http://close.st/Sainsburys 

It is untested. It will probably break.

And if you get London instead of where you are, then all attempts at finding your location failed.  Unless you are in London.

Feel free to leave any comments or suggestions

In the work-abyss between dropping my daughter off at nursery and picking her up again, I gave myself a geek-treat and put together three of my all-time favourite flags.

For new visitors, these aren't images, they have been created with only HTML and CSS. 

All my flags live on this page: CSS Flags: http://stevefitzpatrick.co.uk/demos/flags/. 

And super-thanks to @cootetom for Digging it http://digg.com/design/CSS3_World_Flags

Seychelles

The Gambia

Namibia (Needed a bit of CSS3 here)

And here's how IE7 renders Namibia.  Awww, bless.

Why are you still here?  Go make your own.

http://more.stevefitzpatrick.co.uk/building-a-japanese-then-south-korean-flag-wi

I managed to make a bit of time this evening to create a new flag, USSR.

As before, all of the colours and shapes on the page are pure HTML and CSS.  No images, no letters or numbers.

I don't have time right now to walk through the exact code needed to replicate it, but if you look at the last flag on my CSS3 flags page, I'm sure you'll be able to work it out - you're a clever chap.

CSS3 Flag Page: http://stevefitzpatrick.co.uk/demos/flags/

And as an aside, I'm starting to absolutely adore IE7's attempts at rendering these.

I parked a few spare domains with Sedo, just to see if I'd get any offers.  

Nothing has happened in a few months, so I decided to close my account.

As there was no obvious link or button, I trotted off to their Help Centre.

Click here to download:

video.mp4 (6546 KB)

Here's how it should be done.

Thanks to some Sugru (http://sugru.com), they are now child-proof, guaranteed*.

*Not a guarantee.