When drawing on a canvas in firefox, if you attempt to draw at or move to a point beyond the bounds of the canvas, an error will be thrown (this is copied/pasted directly from Firebug):
An invalid or illegal string was specified" code: "12
Other browsers won’t throw the error. This is for both the drawing methods (lineTo, arc, etc), as well as image drawing. It’s easy enough to do a quick bounds check using the width and height of the canvas before drawing, but what about drawing parts of things?
For example, let’s say you have a circle, defined by a center point and a radius, and drawn with an arc(). If you do a bounds check, the center could be off the canvas, while part of the circle should still technically be visible. Therefore, the circle will either be drawn completely or not at all: there’s no way to make only part of the circle drawn if the center point is off the canvas.
Does anyone have a work around for this?
One that I thought of was using a large “world buffer” canvas that is then copied from to the display canvas. Another might be drawing each object in the center of a buffer canvas, then copying the newly drawn pixels to the display canvas in their proper position.
What have people done to work around this issue?
The canvas crops the image to the bounding rectangle of its view. You should have no problem drawing outside this bounding box. It will not show up on your drawing. Post a particular example to see if we can reproduce the error.