getContext（ '2d'）はSafariでnullを返します。

Question

MacBookでも問題は再現できませんが、ユーザーによってはログがいくつかあります。問題は、CanvasRenderingContext2Dでレンダリングメソッドのいくつかを使用しようとすると、nullであるためクラッシュすることです。

私はcanvas要素を持っていますが、getContextメソッドを持っていますがnullを返します。確認ポテンシャルの ショートリスト：canvas要素が作成され

1. 、既存の、正のサイズを有し、 は
2. のgetContextが
3. は他ありませんページの読み込み （onloadイベントリスナー）の後に実行されたCALL getContextメソッドを持っています「2D」の文字列が小文字
4. に常にあるのgetContextで 他のパラメータ（例えば「WebGLの」）
5. （「2D」）とのgetContextのコールこの問題が再生されますSafari 10
6. 場合によっては、このエラーはページの読み込み後ではなく、ユーザーの操作後に に発生します。この平均キャンバスは破壊され、 が何度か再作成され、機能しました。

Answer 1

私は、これは、ここで説明した状況に関連している場合わからないんだけど、私は私が解決することができた似たような状況がありました。おそらくこれは誰かが助けてくれるのを助けるでしょう。この問題の要点は、ブラウザがHTML5のキャンバスをかなり違ったものにするということでした。特に、キャンバス全体と個々のキャンバス（高さ、幅、面積の制約）に割り当てようとするメモリ量は異なるようです。私は細かいことに悩まされたことはありませんでしたが、いくつかの制約に対応するstack questionがあります。

私にとって、私は多くの独立したキャンバスを生成していました。問題は、私がガベージコレクションに注意を払っていなかったことです。私はChromeで大部分をテストしていたので、気づくまでには長い時間がかかりました。
firefoxでの動作は、私のプロジェクトが意味のあるエラーを投げずに完全に反応しなくなったということでした。Safariでは、キャンバスに割り当てるメモリが不足し、を返すまで私のコンテキストは正常になりました。

私の最初の解決策は、私のキャンバスの解像度を下げることでしたが、より良い解決策は、私が現在使用していなかったものを処分し、即座にそれらを生成することでした。

Answer 2

私は同じ問題を抱えていました。私がそれをたくさん検索が、私は2つのことを試してみましたが、彼らは私の問題を解決していてもなぜ起こるかわからない。：

をあなたがいずれかを実行できます。

1. はあなたの文脈の種類を取得しますあなたの要素の後にタグを使ってhtmlのキャンバスを作成します。あなたがそれを使用しない場合でも、初期化のために。私はそれは、構造化されていないコードは本当に醜いと悪いです知っているが、それは単なる回避策です:(

   するvarキャンバス=のdocument.getElementById（ 'キャンバス'）;

   canvas.getContext（ '2D'）;

2. jsファイルを動的にあなたのキャンバスを作成し、コンテキストを取得：

   VAR newCanvas =のdocument.createElement（ 'キャンバス'）;

   newCanvas.id = 'canv';

   canvasContainer.appendChild(newCanvas); 
   
   var c = newCanvas.getContext('2d'); // whatever type of context