Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There are two popular methods of detecting canvas support in browsers:</p> <ol> <li><p><a href="https://stackoverflow.com/a/2745449/94197">Matt's suggestion</a> of checking for the existence of <code>getContext</code>, also used in a similar fashion by the Modernizr library: </p> <pre><code>var canvasSupported = !!document.createElement("canvas").getContext; </code></pre></li> <li><p>Checking the existence of the <code>HTMLCanvasElement</code> interface, as defined by the <a href="http://www.w3.org/TR/WebIDL/" rel="noreferrer">WebIDL</a> and <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#htmlcanvaselement" rel="noreferrer">HTML</a> specifications. This approach was also recommended in <a href="http://blogs.msdn.com/b/ie/archive/2010/09/03/same-markup-using-canvas-audio-and-video.aspx" rel="noreferrer">a blog post from the IE 9 team</a>.</p> <pre><code>var canvasSupported = !!window.HTMLCanvasElement; </code></pre></li> </ol> <p>My recommendation is a variation of the latter (see <em>Additional Notes</em>), for several reasons:</p> <ul> <li>Every known browser supporting canvas ― including IE 9 ― implements this interface;</li> <li>It's more concise and instantly obvious what the code is doing;</li> <li>The <code>getContext</code> approach is <a href="http://jsperf.com/htmlcanvaselement-vs-getcontext-checks" rel="noreferrer"><strong>significantly slower</strong> across all browsers</a>, because it involves creating an HTML element. This is not ideal when you need to squeeze as much performance as possible (in a library like Modernizr, for example).</li> </ul> <p>There are no noticeable benefits to using the first method. Both approaches can be spoofed, but this not likely to happen by accident.</p> <h2>Additional Notes</h2> <p>It may still be necessary to check that a 2D context can be retrieved. Reportedly, some mobile browsers can return true for both above checks, but return <code>null</code> for <code>.getContext('2d')</code>. This is why Modernizr also checks the result of <code>.getContext('2d')</code>.  However, WebIDL &amp; HTML ― again ― gives us another better, <a href="http://jsperf.com/htmlcanvaselement-vs-getcontext-checks/3" rel="noreferrer">faster</a> option:</p> <pre><code>var canvas2DSupported = !!window.CanvasRenderingContext2D; </code></pre> <p>Notice that we can skip checking for the canvas element entirely and go straight to checking for 2D rendering support. The <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#canvasrenderingcontext2d" rel="noreferrer"><code>CanvasRenderingContext2D</code></a> interface is also part of the HTML specification.</p> <p>You <em>must</em> use the <code>getContext</code> approach <strong>for detecting WebGL</strong> support because, even though the browser may support the <code>WebGLRenderingContext</code>, <code>getContext()</code> may return <em>null</em> if the browser is unable to interface with the GPU due to driver issues and there is no software implementation. In this case, checking for the interface first allows you to skip checking for <code>getContext</code>:</p> <pre><code>var cvsEl, ctx; if (!window.WebGLRenderingContext) window.location = "http://get.webgl.org"; else { cvsEl = document.createElement("canvas"); ctx = cvsEl.getContext("webgl") || cvsEl.getContext("experimental-webgl"); if (!ctx) { // Browser supports WebGL, but cannot create the context } } </code></pre> <h2>Performance Comparison</h2> <p>Performance of the <code>getContext</code> approach is 85-90% slower in Firefox 11 and Opera 11 and about 55% slower in Chromium 18.</p> <p>&emsp;&emsp;&emsp;&emsp;<a href="http://jsperf.com/htmlcanvaselement-vs-getcontext-checks" rel="noreferrer"><img src="https://i.stack.imgur.com/adEMj.png" alt="Simple comparison table, click to run a test in your browser"></a></p>
    singulars
    1. This table or related slice is empty.
    1. POBest way to detect that HTML5 <canvas> is not supported
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USAndy E
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CONokia S60 and the Blackberry Storm are among some of the devices that will false positive on your proposed 2D canvas detects. Unfortunately, mobile gets very hairy and vendors don't follow rules. :( So we end up with more complete (i.e. slower) tests to assure accurate results.
      singulars
      1. PO
      1. USPaul Irish
    2. CO@Paul: that's interesting, I tested the BlackBerry Storm emulators, all of them returned `false` for both your example and mine, it seems they don't provide the `CanvasRenderingContext2D` interface. I've been unable to test the S60 as of yet, I'm still very curious and may do so soon, though.
      singulars
      1. PO
      1. USAndy E
    3. COThis is interesting, but as long as the test comes in under a hundred or so millis, isn't that fine? I imagine that they're all much faster than that anyway. If you memoise a function that tests for this then you only need to pay the cost once.
      singulars
      1. PO
      1. USDrew Noakes
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload