I have a situation similar to this question about copying data between canvases, but in my case I think I'm running into issues with the canvas engine itself and I'd like some understanding/guidance on what I might be doing wrong.
I'm creating an offscreen canvas with the same width and height as the onscreen canvas.
@offscreenCanvas = document.createElement('canvas')
# assign same dimensions as onscreen canvas
@offscreenCanvas.width = canvas.width
@offscreenCanvas.height = canvas.height
Then I'm drawing from the offscreen canvas to the onscreen one like this:
# 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
The offset is also the argument into a function which translates the "live" canvas context before all this drawing takes place.
@context.save()
@context.translate(@offset.x,@offset.y)
@renderer.draw(world, @offset)
@context.restore()
In other words we're trying to grab the section of the offscreen context that corresponds to the translated offset of the on-screen context.
This has some issues. When the offset moves the 'camera' far from the origin, you encounter the 'edges' of the offscreen canvas.
Note that when I do the same rendering operations against the onscreen canvas, the elements are fine.
It seems like the offscreen canvas isn't quite as good about handling drawing off its "edges" the same way the canvas is (silently ignores drawing commands outside of its defined region.) In other words, the offscreen canvas doesn't seem to reflect any drawing I've done above or to the left of [0,0] (or alternatively, below or to the right of [width,height].) Are there ways of accommodating this?
Things I've tried:
- adjusting up the width and height of the offscreen canvas (this unfortunately seems to have a hard-to-predict impact on coordinates)
