During the setup of my site i decided to create a custom 404 page, inspired by this nice canvas experiment made by Hakim. I wanted the bubbles to be bursted by mouse click and to integrate the representative "404" text message, which i wanted to be reactive to the mouse and wave movement.

So for that reason i've rewrite the code pretty much for my own purposes, plus i wanted to integrate some searching functions into my site. For this reason i was looking for a free php searching engine. I found sphider to be well acclaimed among users and developers, so i gave it a try. I managed to setup the search engine almost instantly, however the visual appearance have to be polished a little bit.

A challenge for me was to integrate the text into the canvas considering I opted for a big bold character. I've tried the canvas native fillText function, but the text edges were very jaggy, so i decided to inject SVG code into the canvas, which looked like this:

var data = "data:image/svg+xml," +
    "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'>" +
    "<foreignObject width='100%' height='100%'>" +
        "<div xmlns='http://www.w3.org/1999/xhtml' style='font: bold 160px Myriad Pro, Arial, Helvetica, Arial, sans-serif'>" +
            "<span style='color:rgb(32,124,202); opacity: 0.8; -webkit-text-stroke-color: white; -webkit-text-stroke-width: 2px'>" + letters[pos] + "</span>" +
        "</div>" +
    "</foreignObject>" +
"</svg>";

As a last element I introduced a twitter feeder, which search for every word i define, and used Modernizr for a fallback for browsers which does not support canvas. Sorry IE.