How to get rid of white background under animation in Libcanvas?

Question

JavaScript

Implemented an example on Libcanvas. Then I decided to experiment with isometry. I made a simple 2x2 grid. Replaced

ctx.drawImage({
    image : this.animation.get(),
    center: this.shape.center
});

on the

ctx.projectiveImage({
    image : this.animation.get(),
    to: this.shape
});

, where this.shape is a polygon whose points correspond to grid nodes.
The animation appears and plays, but has a white border around it.

How can I get rid of it and why does it appear?

Answer 1

Good afternoon) The problem is most likely that by default, cleaning goes through the “boundingRectangle” of the shape.
Try adding this code to your class and tell me if the bug has been fixed?

clearPrevious: function (ctx) {
    ctx.clear( this.shape );
}

As an alternative, replace boundingShape:

get currentBoundingShape () {
  return this.shape;
}

In theory, any of these methods should help.
From a performance point of view, instead of projectiveImage, which is implemented through many transformations, it is better to use one transformation. For example, as in the topic " Canvas transformations in plain language ".
Better yet, upload already transformed images (it’s easier for a designer, IMHO). Example from Civilization3:

Answer 2

With this question it is better to address this person.