Change from Jquery create canvas element to document.create

[EWhite613]

JQuery create behaves strangley in Firefox sometimes where it seems like the canvas doesn't have a surface

This project uses semver, please check the scope of this pr:

• [ ] #none# - documentation fixes and/or test additions
• [x] #patch# - backwards-compatible bug fix
• [ ] #minor# - adding functionality in a backwards-compatible manner
• [ ] #major# - incompatible API change

CHANGELOG

• The JQuery creation of a canvas element was behaving oddly in some apps on Firefox.

[quincyle]

Approved

[EWhite613]

Using the JQuery create element on firefox would produce errors in some apps that resulted in simple tasks like measuring text resulting in a canvas error.

$('<canvas />').get(0).getContext('2d').measureText('foo')
[Exception... "Failure"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: debugger eval code :: <TOP_LEVEL> :: line 1"  data: no]

As well setting the font here https://github.com/ciena-frost/ember-frost-core/blob/master/addon/utils/text.js#L83 results in the same issue

Only after the jquery canvas is appended to the body will it fix the error (if the canvas element is removed immediatly after the issue still remains solved).

It seems as if JQuery somehow has the canvas uninitialized. I believe the error comes from here https://dxr.mozilla.org/mozilla-central/source/dom/canvas/CanvasRenderingContext2D.cpp#4524

As the Firefox's JQuery Canvas Element's ownerDocument is belongs to about:blank with a very plain document. Whereas in Chrome the element belongs to the Ember application document (same goes for using document.createElement in Firefox)

[EWhite613]

The JQuery's ownerDocument is set with this logic

By default, elements are created with an .ownerDocument matching the document into which the jQuery library was loaded. Elements being injected into a different document should be created using that document, e.g., $("

hello iframe

", $("#myiframe").prop("contentWindow").document)