Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Determine, the browser supports canvas (paperjs) or not

    Hello.
    Please tell, how can i determine, the browser supports canvas (paperjs), or not ?

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    726
    Thanks
    35
    Thanked 132 Times in 123 Posts
    Code:
    function testCanvas(){
    	var canvas= document.createElement('canvas'),
    	test= !!canvas.getContext;
    	canvas= null;
    	return test;
    }

  • Users who have thanked mrhoo for this post:

    dadli88 (06-22-2012)

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks, but tell please, which means that two exclamation here:
    test= !!canvas.getContext;
    ?

  • #4
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    !! basically converts anything to a boolean. ! is the logical NOT operator, so it will convert a falsy value to true and a truthy value to false. Doing this two times in a row will make falsy values false and truthy values true.

    I'd recommend using Modernizr's detection method, though, which is
    PHP Code:
    function isCanvasSupported(){
      var 
    elem document.createElement('canvas');
      return !!(
    elem.getContext && elem.getContext('2d'));

    I don't know enough about the cross-browser pitfalls of canvas to tell you which browser fails the other check, but if they are doing it this way, it can't be a bad idea.

    (I don't quite get the reason for the canvas= null in that other snippet — it doesn't do anything.)
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #5
    Regular Coder
    Join Date
    Mar 2006
    Posts
    726
    Thanks
    35
    Thanked 132 Times in 123 Posts
    I don't quite get the reason for the canvas= null
    It does nothing in many browsers, but there are some browsers who's memory usage increases with every new html element created by a script, even those elements that are not added to the document tree. If you don't care about that, you can make a simpler test and call it just once-

    Code:
    function hasCanvas(){
       return !!document.createElement('canvas').getContext;
    }

  • #6
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by mrhoo View Post
    It does nothing in many browsers, but there are some browsers who's memory usage increases with every new html element created by a script, even those elements that are not added to the document tree.
    Do you have some documentation on the behavior canvas= null is a workaround for? I can't quite imagine a situation where this would make a difference — the reference would be removed at the end of the function anyway, since converting to boolean prevents the forming of a closure, so I don't see how, after the function has run, there's any difference a browser bug could act upon.

    Btw, the additional elem.getContext('2d') check seems to be necessary for some mobile devices.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •