我用过不少canvas 2D上下文，最近也开始学习一些WebGL。
当我在做一个关于如何实现WebGL的教程时，我想到了标题中的问题。context.drawImage() 在WebGL的2D上下文中。结果是一些类似于 context.drawImage() (至少非常接近)，但因为使用的是WebGL，所以速度更快。
理论上，我相信画布2D上下文中的所有内容都可以在WebGL中进行仿真，从而带来很大的性能提升。那为什么没有呢？
我绝对不是说要改变任何语法或任何东西。我非常喜欢2D上下文的简单性。但是，为什么浏览器没有像那个教程那样在下面做呢？
我知道WebGL并没有在所有地方都得到完全的支持，但我仍然认为如果可能的话，可以使用它，用常规的2D上下文作为后备。
Canvas2D确实使用了GPU的底层，使用的API和WebGL基本相同。
如果你在WebGL中实现整个Canvas 2D规范，很可能会是一个类似的速度。Canvas支持的功能包括 模式绘画 梯度, 剪接路径、任意宽度的线、端点、连接等......。将所有这些功能添加到你的Canvas中，在WebGL中实现，它可能会有类似的速度。
WebGL的原因是 可以 速度更快的原因是：(a)因为你可以选择不实现你不打算使用的功能；(b)因为你可以在知道你只会使用某些功能的情况下进行优化。
举个简单的例子，在画布中，你可以用以下功能来绘制图像 drawImage(someImageElement, x, y). 在WebGL中，你首先要从图像中创建一个纹理，然后使用该纹理进行绘制，所以你要手动管理该纹理。Canvas其实也要做同样的事情。它必须将图像加载到纹理中才能绘制（假设它是基于GPU的，Canvas通常是这样）。但是，它不知道你是否会再次绘制这张图片，所以它不能永远把这张图片作为纹理保留下来。最简单的实现是把图像复制到纹理上，绘制，然后删除纹理。我怀疑画布是这么做的，我猜它有一些用图像制作的纹理缓存。但是，问题是，它对纹理的管理是隐性的，而在WebGL中，它是显性的，你必须自己手动管理纹理。
另一个例子是绘制形状。在WebGL中，您通常在初始化时决定绘制什么形状，并设置绘制这些形状所需的所有数据，然后在渲染时使用您已经设置的形状。在 Canvas 中，更常见的是在飞行中绘制形状，这意味着每次您要绘制形状时，您都要使用 moveTo 和 lineTo 命令来绘制形状，这实际上是在每次渲染时完成所有的工作，而不是像 WebGL 那样只在初始化时才做这些工作。
正是这样的差异导致了canvas更容易，而webgl更快。