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 need to be polished. I will do that when i will have some free time.
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>" +
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.