Base elements not redrawing properly

[Sandro Magi]

I have a background element that just draws a regular grid, but dragging the nested/yellow box outside of the bounds of its container doesn't properly redraw the underlying grid to the right and below:

https://jsfiddle.net/qw2odmLb/37/

If you move the containing element, the grid is properly redrawn.

However, this redraw problem only seems to happen if the grid element is positioned at negative offsets, so if you change the base grid to start at (0,0), no redraw problem occurs. When placed at its current (-400,-400), the redraw issues appear at some positive offset.

This looks like a Crafty bug, but please let me know if I've missed something here.

Sandro

[starwed]

Crafty has essentially two modes when rendering Canvas entities: it can either do a full redraw of the scene, or it can attempt to render only those regions of the viewport which have changed.

The issue here is that when doing a partial redraw, the grid entity isn't correctly defining its boundaries.  According to its dimensions, it extends from (-400, -400) to (200, 200), so for a partial redraw this is the only region that will be rendered.  However, it's actually drawing gridlines outside of this area.

There are two possible fixes:

- I'd recommend that an entity like this should only draw within the region defined by its dimensions, so you'd want to update the draw routine to fix this

- An alternative (if that's impractical for some reason I'm missing) is to use the `offsetBoundary` method provided by the 2D component. The main motivation of that method is to allow canvas entities to draw outside of their "natural" area, although it's more intended for things like halo/blur effects.

For some more specifics about how the bug manifests: The reason why it only happens when moving the small box is because Crafty uses a rough heuristic to determine when to do a full redraw -- if more than 60% of the entities in the layer need redrawing, it will do a full redraw.  When you move only the small box, that threshold isn't met, so only the new+old regions occupied by that box get redrawn.   In the area that box moved out of, the grid will only be redrawn if the grid's  x/y/w/h dimensions indicate that it occupies that space.