getContext（＆＃39; 2d＆＃39;）在Safari 10

Question

即使在我们的MacBook上也无法重现问题，但我们有一些用户的日志。问题是当我尝试在CanvasRenderingContext2D上使用一些渲染方法时，它崩溃了，因为它是空的。

所以我有canvas元素，是getContext方法但它返回null。 已检查电位的简短列表：

1. canvas元素已创建，现有，具有正尺寸和 有getContext方法
2. 页面加载后执行getContext调用 （onload listener）
3. 没有其他getContext调用 其他参数（＆＃39; webGl＆＃39;例如）
4. 在getContext中（＆＃39; 2d＆＃39;）＆＃39; 2d＆＃39;字符串始终为小写
5. 此问题仅在Safari 10上重现
6. 在某些情况下，此错误不会在页面加载后发生     经过一些用户操作。这意味着帆布被毁坏了     重新创建了一些，并且它有效。

Answer 1

我遇到了同样的问题。我不知道为什么会发生这种情况，即使我搜索了很多但我尝试了两件事他们解决了我的问题：

你可以：

1. 使用元素后面的标记，在html中获取画布上下文的类型。即使你不使用它，也只是为了初始化。我知道这是非常丑陋和糟糕的非结构化代码，但它只是一种解决方法:(

   var canvas = document.getElementById（＆＃39; canvas＆＃39;）;

   canvas.getContext（＆＃39; 2D＆＃39）;

2. 使用js动态创建画布并获取上下文：

   var newCanvas = document.createElement（＆＃39; canvas＆＃39;）;

   newCanvas.id =＆＃39; canv＆＃39;;

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

Answer 2

如果这与这里描述的情况相关，我确定，但我有类似的情况，我能够解决。也许这有助于有人下线。问题的关键在于浏览器处理HTML5画布的方式完全不同。特别是，他们愿意分配给画布总数和个别画布（高度，宽度和面积的约束）的内存量似乎不同。我从来不打算弄清楚细节，但是stack question解决了一些限制问题

对我来说，我正在制作许多独立的画布并分别管理他们的2D环境。问题是我不小心垃圾收集，我花了很长时间才注意到它，因为我在Chrome中测试了大部分内容，其中一切正常。 同时firefox中的行为是我的项目变得完全没有响应而没有丢失有意义的错误，并且在Safari中我可以使我的上下文很好，直到我用完总内存分配给画布，然后getContext('2d')将返回{{1 }}。

我的第一个解决方案是降低画布的分辨率，但更好的解决方案是处理我当前没有使用的那些并动态生成它们。