When drawing on a canvas in firefox, if you try to draw or move to a point outside the canvas, an error will be generated (this is copied / pasted directly from Firebug):
An invalid or illegal string was specified" code: "12
Other browsers will not cause an error. This is used both for drawing methods (lineTo, arc, etc.), and for drawing. It's easy enough to do a quick border 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 radius, and drawn using an arc (). If you are performing a border check, the center can be removed from the canvas, and part of the circle must be technically visible. Thus, the circle will be either completely drawn or completely absent: there is no way to make only part of the circle if the center point is outside the canvas.
Does anyone have a job to do this?
The one I was thinking of was using a large “world buffer” canvas, which is then copied onto the display canvas. Another could be drawing each object in the center of the buffer canvas, and then copying the newly drawn pixels to the display canvas in the correct position.
What have people done to solve this problem?