离屏画布是否有与普通画布一样多的“空间”？答案

【问题标题】：Does an offscreen canvas have as much "space" as a normal one?离屏画布是否有与普通画布一样多的“空间”？
【发布时间】：2015-12-26 07:14:55
【问题描述】：

我的情况类似于this question about copying data between canvases，但在我的情况下，我认为我遇到了画布引擎本身的问题，我想了解/指导我可能做错了什么。

我正在创建一个与屏幕画布具有相同宽度和高度的屏幕外画布。

  @offscreenCanvas = document.createElement('canvas')

  # assign same dimensions as onscreen canvas
  @offscreenCanvas.width  = canvas.width
  @offscreenCanvas.height = canvas.height

然后我像这样从屏幕外的画布绘制到屏幕上的画布：

# grab the width and height of the canvas
{ width, height } = @canvasElement
{ x, y } = offset

# copy image from layer into canvas
@context.drawImage 
  @offscreenContext.canvas, -x, -y, width, height, -x, -y, width, height

偏移量也是一个函数的参数，该函数在所有绘图发生之前转换“实时”画布上下文。

@context.save()
@context.translate(@offset.x,@offset.y)
@renderer.draw(world, @offset)
@context.restore()

换句话说，我们正在尝试获取屏幕外上下文中与屏幕上上下文的平移偏移相对应的部分。

这有一些问题。当偏移量使“相机”远离原点时，您会遇到屏幕外画布的“边缘”。

请注意，当我对屏幕画布执行相同的渲染操作时，这些元素都很好。

似乎离屏画布在处理“边缘”的绘制方面不如画布好（默默地忽略其定义区域之外的绘图命令。）换句话说，离屏画布没有t 似乎反映了我在[0,0] 的上方或左侧（或者[width,height] 的下方或右侧）所做的任何绘图。有没有办法解决这个问题？

我尝试过的事情：

调整屏幕外画布的宽度和高度（不幸的是，这似乎对坐标产生了难以预测的影响）

【问题讨论】：

那段代码绝对不是javascript。
@gre_gor 谢谢，更新了标签（表明它是咖啡脚本）
糟糕！我在尝试编辑时不小心删除了我的评论。内存中画布的行为应与窗口中可见的画布相同。您偏移多远以适应相机位置？
@markE 即使偏移量很小，例如 (-5, -5) 或 (5,5)，我也能看到问题。请注意，我将屏幕外画布设置为与屏幕画布具有相同的宽度和高度。

标签： html canvas coffeescript off-screen

【解决方案1】：

我已经能够通过指示更大的屏幕外画布尺寸来解决该问题。坐标问题似乎与 Isomer 的原点位置有关（您可以通过传入不同的原点来覆盖它。 )

一个小提示：根据MDN's article on canvas optimization，您需要确保传递给drawImage 的坐标和尺寸不是浮点数（即，在它们上调用Math.floor。）我遇到了奇怪的抗锯齿工件而没有这。

【讨论】：