I've written a program that uses the <canvas> to do various things... basically palette swaps (like filter type stuff... grayscale, sepia, inverting the colours, etc.) and also it generates ASCII art. You choose a picture on your hard drive or on the internet somewhere and can make it do the stuff.
So the first problem I'm having is that for some reason images from the internet don't work on Firefox (at least on my computer). They appear on the <canvas> but that's it... the functions basically stop working after that. It's not my code, as it works fine in Safari. It also works fine for any image from the person's hard drive... even if that person types the file path into the URL box on my page (the box normally used for typing in web addresses... there's a separate file selector thing on there specifically for local files).
Second, this is more of a question on HTML / JavaScript in general, but what's a good / easy way to tell browsers apart? I need to do so because upon testing my program, I've found that there are some huge differences between Safari and Firefox. One difference was so great that it caused the program to not even be able to run in Firefox...
So currently I'm using this:if (navigator.userAgent.indexOf("Firefox")!=-1){
// stuff for Firefox to do
}
else{
// stuff for other browsers to do
// (so far I'm only testing it on Firefox and Safari, but I'll
// add other else if statements later)
}
which seems to be working fine, but I'm wondering if there's anything wrong with that. Also I don't really understand that code... how do I know what I should change it to for every browser? Like, would just changing the string "Firefox" to some other browser's name work?
Third question... the DOCTYPE. For some reason the page does not display properly when I give it the HTML5 DOCTYPE... it doesn't even seem to display correctly with an HTML4 DOCTYPE either... but works fine when I give it no DOCTYPE at all. I'm using nothing deprecated so I don't know what the problem could be.