{"id":294,"date":"2012-03-03T09:52:40","date_gmt":"2012-03-03T07:52:40","guid":{"rendered":"https:\/\/esimov.com\/blog\/?p=294"},"modified":"2017-08-28T10:25:01","modified_gmt":"2017-08-28T08:25:01","slug":"404-page","status":"publish","type":"post","link":"https:\/\/esimov.com\/blog\/2012\/03\/03\/404-page\/","title":{"rendered":"404 page"},"content":{"rendered":"

During the setup of my site i decided to create a custom 404 page, inspired by this<\/a> 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.<\/p>\n

\"\"<\/a><\/p>\n

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<\/kbd> 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\u00a0appearance\u00a0have to be\u00a0polished a little bit.<\/p>\n

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\u00a0fillText<\/kbd> function, but the text edges were very jaggy, so i decided to inject SVG code into the canvas, which looked like this:<\/p>\n

\r\nvar data = "data:image\/svg+xml," +\r\n    "<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='400' height='400'>" +\r\n    "<foreignObject width='100%' height='100%'>" +\r\n        "<div xmlns='http:\/\/www.w3.org\/1999\/xhtml' style='font: bold 160px Myriad Pro, Arial, Helvetica, Arial, sans-serif'>" +\r\n            "<span style='color:rgb(32,124,202); opacity: 0.8; -webkit-text-stroke-color: white; -webkit-text-stroke-width: 2px'>" + letters[pos] + "<\/span>" +\r\n        "<\/div>" +\r\n    "<\/foreignObject>" +\r\n"<\/svg>";\r\n<\/code><\/pre>\n
As a last element I introduced a twitter feeder, which search for every word i define, and used Modernizr<\/a> for a fallback for browsers which does not support canvas. Sorry IE.<\/p>\n","protected":false},"excerpt":{"rendered":"
This is a simple experiment which scope was to familiarize myself with HTML5, after coding almost in AS3. At the same time i wanted to test the HTML5 canvas<\/kbd> capabilities.<\/p>\n","protected":false},"author":1,"featured_media":353,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,20],"tags":[48,49,44],"class_list":["post-294","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-experiments","category-javascript","tag-canvas","tag-html5","tag-javascript-2"],"_links":{"self":[{"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/posts\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/comments?post=294"}],"version-history":[{"count":0,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/posts\/294\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/media\/353"}],"wp:attachment":[{"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/media?parent=294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/categories?post=294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/esimov.com\/blog\/wp-json\/wp\/v2\/tags?post=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}