Some of you _may_ find this useful...
A list of Canvas properties captured via AJAX, stored in a MySQL database via PHP which also converts this to an HTML table (with colouring)
Across the X axis is placed the browser's User Agent string.
The Y axis is the Javascript property name.
Each cell is the data returned from the Javascript Object.prototype.toString() call (there are SOOO many tricks one can perform here the possibilities are stunning. Especially once you roll in typeof and other chums... brilliant!).
Each table cell is coloured.
Grey means that this property did not exist in the given browser.
A yellow row means that this property existed on all platforms but gave different results in at least one case.
A default setup is used. That is canvasElement.getContext('2d') has been called but no other canvas functions.
Interesting Differences
Colours
Safari reports CSS style named colours. All others report 6 digit hex (what about alpha).
Properties
Safari supports a whole bunch of set$propertyName type calls. No others do.
Shadows
Safari has a clearShadow routine (sensible!)
Bitmaps
All except Safari support get and put image data functions.
Firefox/Mozilla has the handy drawWindow. Kinda useful. Renders web content into a Canvas. However, there's a ton of security restrictions. This could be a useful way of getting images from local applications into the web browser.
Transforms and Coordinates
All except Safari support the very useful "setTransform".
All except Safari support the, also the useful, "transform".
All except Safari support the slightly odd but useful "isPointInPath".
I'd like to see a transformPoint function TBH.
Text
Mozilla support text. It's quite nice in its own way BUT... don't expect miracles. The last time I tested it anti-aliasing doesn't when text is drawn along a path.
See mozText. I must check newer browsers for fillText and strokeText.
Notes
The following are untested as I did this before...
Google's "Chrome" arrived on the (so called) scene.
WebKit got embedded in Qt.
Opera 9.62 came out with it's nice new debugger.
Wii.
If hassled I might let someone have the TERRIBLE source code. This was lashed together in an evening to solve a problem. It is "engineer" code... :-D
Lastly, I think we should separate out the matrix math from Canvas and create a Matrix library for Javascript. Also useful would be a Vector library. Given Javascript's type flexibility the internal state could be packed arrays of 32 bit floats (or double if you wish) and there are excellent libraries out there to optimise the jebus out of this stuff.
L8trz,
Burnttoy.
Monday, 15 September 2008
Wednesday, 3 September 2008
Google Chrome, Silverlight and hacking.
Google Chrome... well, I've just given www.bbodemo.com and.... none of the Silverlight shows up! No warnings about plugins, no SL D/L progress just the background.
A quick check of this pretty demo also shows no love.
However, Chrome seems to have found the SL plugin - one can check by getting up a new tab and typing about:plugins into the address bar and pressing enter - this list shows that all the plugins on my machine (SL, QT, Flash etc) are present in that list (and, as I've mentioned before... why on Earth is Silverlight associated with the .scr file extension).
I've tracked down a list of other "about:" links... ready?
Useful
about:version - Display current Chrome version (user agent etc)
about:plugins - Display Installed Plugins (Flash, SL, PDF, QT etc)
about:histograms - Display History
about:dns - Display DNS Stats
about:cache - View Cache Pages
view-cache:stats - Cache Stats
about:stats - Display Stats
about:network - Somewhat like HTTPFox but not as functional
about:memory - "stats for nerds"
about:crash Shows the "Crash" page
about:hang
about:shorthang
Easter Eggs. Maybe not that useful
about:internets The message “Don’t Clog the Tubes!” appears in the title bar... go figure.
chrome-resource://favicon/ - Get "favicon" (of browser?) comes up with a PNG
Task Manager
This is where things start to look a little less like a browser and more like an OS App Kernel... interesting.
Right click on the title bar of your Chrome window and select "Task Manager" - this is not the windows TM but the Chrome TM. In the bottom left of the TM is "Stats for Nerds" - this will give you all sorts of useful info. This can also be accessed by entering the address "about:memory"
Debugging
Next to the address bar is the "Control the Current Page" button - click it. Down the bottom is "Development" which contains a JS debugger, page source viewing etc - I have yet to experiment here.
Installer
The installer is probably just a stub (it's less than 500K) and seems to DL the rest of itself from the Internet.
Interestingly it doesn't install itself in %Program File% instead sequestering itself in "C:\Users\$user\AppData\Local\Google\Chrome\Application\chrome.exe".
Anyhoo... That's all so far. Just keepin' 'em peeled innit.
UPDATE!! Silverlight _does_ seem to be running but very, very, very, very, VERY slowly.
L8rz, burnttoy
A quick check of this pretty demo also shows no love.
However, Chrome seems to have found the SL plugin - one can check by getting up a new tab and typing about:plugins into the address bar and pressing enter - this list shows that all the plugins on my machine (SL, QT, Flash etc) are present in that list (and, as I've mentioned before... why on Earth is Silverlight associated with the .scr file extension).
I've tracked down a list of other "about:" links... ready?
Useful
about:version - Display current Chrome version (user agent etc)
about:plugins - Display Installed Plugins (Flash, SL, PDF, QT etc)
about:histograms - Display History
about:dns - Display DNS Stats
about:cache - View Cache Pages
view-cache:stats - Cache Stats
about:stats - Display Stats
about:network - Somewhat like HTTPFox but not as functional
about:memory - "stats for nerds"
about:crash Shows the "Crash" page
about:hang
about:shorthang
Easter Eggs. Maybe not that useful
about:internets The message “Don’t Clog the Tubes!” appears in the title bar... go figure.
chrome-resource://favicon/ - Get "favicon" (of browser?) comes up with a PNG
Task Manager
This is where things start to look a little less like a browser and more like an OS App Kernel... interesting.
Right click on the title bar of your Chrome window and select "Task Manager" - this is not the windows TM but the Chrome TM. In the bottom left of the TM is "Stats for Nerds" - this will give you all sorts of useful info. This can also be accessed by entering the address "about:memory"
Debugging
Next to the address bar is the "Control the Current Page" button - click it. Down the bottom is "Development" which contains a JS debugger, page source viewing etc - I have yet to experiment here.
Installer
The installer is probably just a stub (it's less than 500K) and seems to DL the rest of itself from the Internet.
Interestingly it doesn't install itself in %Program File% instead sequestering itself in "C:\Users\$user\AppData\Local\Google\Chrome\Application\chrome.exe".
Anyhoo... That's all so far. Just keepin' 'em peeled innit.
UPDATE!! Silverlight _does_ seem to be running but very, very, very, very, VERY slowly.
L8rz, burnttoy
Tuesday, 2 September 2008
Forcing reloading of URL Protocols (getting round Same Origin policy)
Let's say you have a link that looks like this <a href="myurlscheme:login/AppUserId/820">myurlscheme:login/AppUserId/820</a>
This link will only operate when clicked on by a user (that is it's semantics, it's a "a href", a hypertext link to another document).
But, let's say I don't want to do that. Instead I want to trigger the application bound to that protocol automagically. So, the first step (the only thing I can try) is the use XMLHttpRequest. This handy JS function allows me to "get" or "post" data from a server. The problem here is that for the sake of security this can only operate from the domain from which the page containing the JS was loaded e.g. http://www.myurlscheme.com can run JS to get requests from myurlscheme.com but not google.com or https://www.myurlscheme.com (protocol is significant in these tests). This page (mozilla) provides an excellent and clear overview of the "Same Origin" policy.
So, what's the solution?
In my HTML page (actually music.aspx which is HTML with embedded ASP code - basically PHP ;-) I create an "iframe" tag and make it invisible...
<iframe id="protocolHandler" src="" style="display:none"></iframe>
Now, when I want to programatically invoke the "myurlscheme" protocol I can use the following
document.getElementById("protocolHandler").src = "myurlscheme:login/AppUserId/820";
And... almost unbelievably, setting the iframe src property forces a reload of that frame (which is invisible anyway). Now, a URL Protocol does not return any data to the browser (on any platform I've tested) despite people insisting on the opposite I can find no way to get data back from a URL Protocol. However, this hack works for what I need so... err.. peachy.
L8rz,
Matthew
This link will only operate when clicked on by a user (that is it's semantics, it's a "a href", a hypertext link to another document).
But, let's say I don't want to do that. Instead I want to trigger the application bound to that protocol automagically. So, the first step (the only thing I can try) is the use XMLHttpRequest. This handy JS function allows me to "get" or "post" data from a server. The problem here is that for the sake of security this can only operate from the domain from which the page containing the JS was loaded e.g. http://www.myurlscheme.com can run JS to get requests from myurlscheme.com but not google.com or https://www.myurlscheme.com (protocol is significant in these tests). This page (mozilla) provides an excellent and clear overview of the "Same Origin" policy.
So, what's the solution?
In my HTML page (actually music.aspx which is HTML with embedded ASP code - basically PHP ;-) I create an "iframe" tag and make it invisible...
<iframe id="protocolHandler" src="" style="display:none"></iframe>
Now, when I want to programatically invoke the "myurlscheme" protocol I can use the following
document.getElementById("protocolHandler").src = "myurlscheme:login/AppUserId/820";
And... almost unbelievably, setting the iframe src property forces a reload of that frame (which is invisible anyway). Now, a URL Protocol does not return any data to the browser (on any platform I've tested) despite people insisting on the opposite I can find no way to get data back from a URL Protocol. However, this hack works for what I need so... err.. peachy.
L8rz,
Matthew
Subscribe to:
Posts (Atom)