clearRect

[Nicolas Garcia Belmonte]

Hi, I'm having some troubles with the clear rectangle (clearRect)
method in excanvas.
It seems that "clearRect" just clears all the canvas background
instead of just clearing the zone specified by the coordinates.
Do you have some information about this or a useful workaround?

Thanks.

[Erik Arvidsson]

Yes, clearRect is not implemented. We always clear the entire canvas,
which is a common usecase. Clearing a rectangle requires clipping
paths or some other mechanism and I don't think VML gives us that
power.

--
erik

[tcole6]

No idea if this affects any other part of the code, but it works for
me and has presented me with no problems.

Simply replace the existing clearRect function with this:

contextPrototype.clearRect = function(x, y, width, height) {
if (x >= 0 && y >= 0 && width>= 0 && height >= 0) {
for (var i = 0; i < this.element_.childNodes.length; i++) {
var shape = this.element_.childNodes[i];
if (shape.offsetLeft >= x && shape.offsetTop >= y &&
(shape.offsetLeft + shape.offsetWidth) <= (x + width) &&
(shape.offsetTop + shape.offsetHeight) <= (y + height)) {
this.element_.removeChild(shape);
i--;
}
}
}
else {
alert(x + ", " + y + ", " + width + ", " + height);
this.element_.innerHTML = "";
}
this.currentPath_ = [];
};

This is rough and dirty and could be optimized, but it's working on my
system. I will try to clean it up and error detect and resubmit later.
Let me know how it works for you.

On Apr 21, 12:30 pm, "Erik Arvidsson" <erik.arvids...@gmail.com>
wrote:

> Yes, clearRect is not implemented.  We always clear the entire canvas,
> which is a common usecase.  Clearing a rectangle requires clipping
> paths or some other mechanism and I don't think VML gives us that
> power.
>
> On Sun, Apr 20, 2008 at 14:39, Nicolas Garcia Belmonte
>

[tcole6]

Actually I already did a minor change:

contextPrototype.clearRect = function(x, y, width, height) {

var x = (x) ? x : 0;
var y = (y) ? y : 0;
var width = (width) ? width : canvas.offsetWidth;
var height = (height) ? height : canvas.offsetHeight;

for (var i = 0; i < this.element_.childNodes.length; i++) {
var shape = this.element_.childNodes[i];
if (shape.offsetLeft >= x && shape.offsetTop >= y &&
(shape.offsetLeft + shape.offsetWidth) <= (x + width) &&
(shape.offsetTop + shape.offsetHeight) <= (y + height)) {
this.element_.removeChild(shape);
i--;
}
}

this.currentPath_ = [];
};

The only issue with this is you may not get a completely "square"
clearing. If a shape does not completely fit within the bounding
ranges, it is left intact. Therefore you may see a slightly non-square
clearing area. Another change to this might experiment with finding
objects that satisfy the x, y option yet fail the width, height option
and therefore remove that element or change it's vml to start outside
the bounding area. I'll work more on it later.

> > erik- Hide quoted text -
>
> - Show quoted text -