Playing with Canvas<\/title> <\/head> <body style=\"padding:0 0; margin: 0 0; background:black\"> <canvas id=\"myCanvas\" width=\"1024\" height=\"1024\" ><\/canvas> <script type=\"text\/javascript\"> \/\/convert to CSS friendly Hex String function\u2026","rel":"","context":"In "Geeklife"","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1385,"url":"https:\/\/www.gubatron.com\/blog\/iterative-sierpinksi-fractal-drawn-on-html5-canvas\/","url_meta":{"origin":1324,"position":1},"title":"Iterative Sierpinksi Fractal (drawn on HTML5 Canvas)","author":"gubatron","date":"September 5, 2009","format":false,"excerpt":"So maybe you've seen this very famous fractal called the Sierpinksi Fractal. A few days ago I heard that you could create this fractal pattern by simply plotting out of a random sequence of mid points of an ever growing set of these mid points. So curiosity added with my\u2026","rel":"","context":"In "Geeklife"","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1051,"url":"https:\/\/www.gubatron.com\/blog\/jquery-tag-wrapping\/","url_meta":{"origin":1324,"position":2},"title":"jQuery tag wrapping","author":"gubatron","date":"December 19, 2008","format":false,"excerpt":"Many times you'll be working on something in HTML that could be long and repetitive, and then for some reason you need to edit the entire thing to wrap each of the tags on some other tags, a common example would be to link many elements. Take this example, there's\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2126,"url":"https:\/\/www.gubatron.com\/blog\/animating-a-game-like-sky-with-html5-canvas\/","url_meta":{"origin":1324,"position":3},"title":"Animating a game-like sky with HTML5 Canvas","author":"gubatron","date":"December 28, 2010","format":false,"excerpt":"Try it | View Source Again playing a little more with HTML5 and Canvas animation. This time around the result is a little more pleasing to the eye, based on some ideas I have for a little arcade game I want to make I've created a gradient blue sky and\u2026","rel":"","context":"In "AJAX"","block_context":{"text":"AJAX","link":"https:\/\/www.gubatron.com\/blog\/category\/ajax\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2749,"url":"https:\/\/www.gubatron.com\/blog\/deploying-html5-apps-on-cloudfront-with-efficient-invalidation-requests\/","url_meta":{"origin":1324,"position":4},"title":"Deploying HTML5 apps on CloudFront with efficient invalidation requests","author":"gubatron","date":"June 8, 2012","format":false,"excerpt":"So you decided to build your next web app\/site using nothing but HTML5 and Javascript. No server side processing for anything related to UI. This means you will be coding a lot of JavaScript. Wouldn't it be nice to put all that static HTML and JS on your CloudFront CDN\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":308,"url":"https:\/\/www.gubatron.com\/blog\/useful-firefox-extensions\/","url_meta":{"origin":1324,"position":5},"title":"Useful Firefox extensions","author":"gubatron","date":"May 2, 2006","format":false,"excerpt":"Here's a page I've been meaning to do a long time ago, if you're a web developer you might want to bookmark it so that next time you set up Firefox +1.5 you'll have direct links to all the web developer tools you'll ever need. Web Developer Extension (Best extension\u2026","rel":"","context":"In "Gubatron"","block_context":{"text":"Gubatron","link":"https:\/\/www.gubatron.com\/blog\/category\/gubatron\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/1324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/comments?post=1324"}],"version-history":[{"count":0,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/1324\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/media?parent=1324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/categories?post=1324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/tags?post=1324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1324,"date":"2009-07-11T07:59:03","date_gmt":"2009-07-11T11:59:03","guid":{"rendered":"http:\/\/www.gubatron.com\/blog\/?p=1324"},"modified":"2009-07-11T07:59:03","modified_gmt":"2009-07-11T11:59:03","slug":"html-5-is-out-and-about","status":"publish","type":"post","link":"https:\/\/www.gubatron.com\/blog\/html-5-is-out-and-about\/","title":{"rendered":"HTML 5 is out and about"},"content":{"rendered":"

I believe that the <canvas>, <audio>and <video> tags will make the web a pretty exciting place. A lot of Flash components will be rewritten or converted<\/a> into Javascript+HTML5 Object components<\/a> making available more reusable elements for a graphical and interactive web, all being open sourced (javascript) and with no extra plugins needed.<\/p>\n

Some places where we can already see (or will) the use of HTML 5 tags and javascript on those elements are:<\/p>\n

GMail Mobile for iPhone and Android<\/li>\n

Yahoo! Pipes<\/a><\/li>\n
Bespin, a code editor created by Mozilla lab<\/a>, they basically rewrote the text editing component using the canvas tag so that its a high performance text editing component, with a nice look, selection highlighting, new scrollbars, command support, it can be extended with your own commands (reminds me of emacs)<\/li>\n
Google Waves<\/li>\n
Some blogs that are already using the <article>, <nav>, <footer> and other new HTML 5 tags<\/li>\n
YouTube<\/a> is getting ready for the video tag<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
I believe that the <canvas>, <audio>and <video> tags will make the web a pretty exciting place. A lot of Flash components will be rewritten or converted into Javascript+HTML5 Object components making available more reusable elements for a graphical and interactive web, all being open sourced (javascript) and with no extra plugins needed. Some places where […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[15,30,39],"tags":[537],"class_list":["post-1324","post","type-post","status-publish","format-standard","hentry","category-code","category-geeklife","category-internet","tag-html5"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5Unzf-lm","jetpack-related-posts":[{"id":2121,"url":"https:\/\/www.gubatron.com\/blog\/playing-with-basics-of-html5-canvas\/","url_meta":{"origin":1324,"position":0},"title":"Playing with basics of HTML5 Canvas","author":"gubatron","date":"December 18, 2010","format":false,"excerpt":"Here's a snippet of something I did tonight to play a bit with the Canvas and 2d Graphics context objects in javascript. [html] Playing with Canvas<\/title> <\/head> <body style=\"padding:0 0; margin: 0 0; background:black\"> <canvas id=\"myCanvas\" width=\"1024\" height=\"1024\" ><\/canvas> <script type=\"text\/javascript\"> \/\/convert to CSS friendly Hex String function\u2026","rel":"","context":"In "Geeklife"","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1385,"url":"https:\/\/www.gubatron.com\/blog\/iterative-sierpinksi-fractal-drawn-on-html5-canvas\/","url_meta":{"origin":1324,"position":1},"title":"Iterative Sierpinksi Fractal (drawn on HTML5 Canvas)","author":"gubatron","date":"September 5, 2009","format":false,"excerpt":"So maybe you've seen this very famous fractal called the Sierpinksi Fractal. A few days ago I heard that you could create this fractal pattern by simply plotting out of a random sequence of mid points of an ever growing set of these mid points. So curiosity added with my\u2026","rel":"","context":"In "Geeklife"","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1051,"url":"https:\/\/www.gubatron.com\/blog\/jquery-tag-wrapping\/","url_meta":{"origin":1324,"position":2},"title":"jQuery tag wrapping","author":"gubatron","date":"December 19, 2008","format":false,"excerpt":"Many times you'll be working on something in HTML that could be long and repetitive, and then for some reason you need to edit the entire thing to wrap each of the tags on some other tags, a common example would be to link many elements. Take this example, there's\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2126,"url":"https:\/\/www.gubatron.com\/blog\/animating-a-game-like-sky-with-html5-canvas\/","url_meta":{"origin":1324,"position":3},"title":"Animating a game-like sky with HTML5 Canvas","author":"gubatron","date":"December 28, 2010","format":false,"excerpt":"Try it | View Source Again playing a little more with HTML5 and Canvas animation. This time around the result is a little more pleasing to the eye, based on some ideas I have for a little arcade game I want to make I've created a gradient blue sky and\u2026","rel":"","context":"In "AJAX"","block_context":{"text":"AJAX","link":"https:\/\/www.gubatron.com\/blog\/category\/ajax\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2749,"url":"https:\/\/www.gubatron.com\/blog\/deploying-html5-apps-on-cloudfront-with-efficient-invalidation-requests\/","url_meta":{"origin":1324,"position":4},"title":"Deploying HTML5 apps on CloudFront with efficient invalidation requests","author":"gubatron","date":"June 8, 2012","format":false,"excerpt":"So you decided to build your next web app\/site using nothing but HTML5 and Javascript. No server side processing for anything related to UI. This means you will be coding a lot of JavaScript. Wouldn't it be nice to put all that static HTML and JS on your CloudFront CDN\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":308,"url":"https:\/\/www.gubatron.com\/blog\/useful-firefox-extensions\/","url_meta":{"origin":1324,"position":5},"title":"Useful Firefox extensions","author":"gubatron","date":"May 2, 2006","format":false,"excerpt":"Here's a page I've been meaning to do a long time ago, if you're a web developer you might want to bookmark it so that next time you set up Firefox +1.5 you'll have direct links to all the web developer tools you'll ever need. Web Developer Extension (Best extension\u2026","rel":"","context":"In "Gubatron"","block_context":{"text":"Gubatron","link":"https:\/\/www.gubatron.com\/blog\/category\/gubatron\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/1324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/comments?post=1324"}],"version-history":[{"count":0,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/1324\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/media?parent=1324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/categories?post=1324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/tags?post=1324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}