problema com context clip

[vikcch 18]

Boas!

Tenho uma imagem (64px por 32px) com uma sombra meio transparente que não posso corta-la directamente no *.png... E fica sobreposta quando faço o clip.

Aquela parte para onde aponta a seta vermelha. (só não acontece na ultima imagem desenhada)

No meu projecto também aparece o resto da imagem (onde estão as setas azuis) quando passo com o rato nos tiles que fazem fronteira...

fica aqui o codigo para desenhar a imagem de cima:

window.onload = function () {

   var canvas = document.getElementById('myCanvas');
   var context = canvas.getContext('2d');

   var myImage = new Image();
   myImage.src = "https://s24.postimg.cc/4szaj728x/test.png";

   myImage.onload = function () {
       context.save();
       context.translate(100, 100);
       context.moveTo(0, 0);
       context.lineTo(myImage.width / 2, myImage.height / 2);
       context.lineTo(0, myImage.height);
       context.lineTo(-myImage.width / 2, myImage.height / 2);
       context.closePath();
       context.clip();
       context.drawImage(myImage, -myImage.width / 2, 0);
       context.restore();

       context.save();
       context.translate(100 + myImage.width / 2, 100 + myImage.height / 2);
       context.moveTo(0, 0);
       context.lineTo(myImage.width / 2, myImage.height / 2);
       context.lineTo(0, myImage.height);
       context.lineTo(-myImage.width / 2, myImage.height / 2);
       context.closePath();
       context.clip();
       context.drawImage(myImage, -myImage.width / 2, 0);
       context.restore();
   };

};

Alguém sabe como resolver isso??

É um jogo isométrico, o ideal seria ordenar "topológicamente" todos os items/objectos na cena (para não ficarem sobrepostos quando se desenha objectos com mais de um tile) mas tive a ver como se fazia e perdi tempo a mais e não consegui fazer... decidi dividir os objectos grandes e desenha-los tile por tile... mas tem esse tem esse problema que me fez abrir este tópico...

Obrigado desde já!

[vikcch 18]

Já resolvi, usei um canvas auxiliar para fazer o clip.

Mas tem um problema de "aliasing" que mal se nota nas bordas do tile, como mostra a imagem:

Tentei setar o imageSmoothingEnabled a false mas ficou na mesma...

Alguém sabe uma solução?

fica aqui o code:

window.onload = function () {

   var canvas = document.getElementById('myCanvas');
   var context = canvas.getContext('2d');

   var myImage = new Image();
   myImage.src = "https://s24.postimg.cc/4szaj728x/test.png";

   var canvasAux = null;
   var contextAux = null;

   function initCanvasAux() {
       canvasAux = document.createElement('canvas');
       canvasAux.width = myImage.width;
       canvasAux.height = myImage.height;
       contextAux = canvasAux.getContext('2d');
   }

   function drawTile(x, y, index) {
       contextAux.clearRect(0, 0, canvasAux.width, canvasAux.height);
       contextAux.save();
       contextAux.translate(myImage.width / 2, 0);
       contextAux.moveTo(0, 0);
       contextAux.lineTo(myImage.width / 2, myImage.height / 2);
       contextAux.lineTo(0, myImage.height);
       contextAux.lineTo(-myImage.width / 2, myImage.height / 2);
       contextAux.closePath();
       contextAux.clip();
       contextAux.imageSmoothingEnabled = false;
       contextAux.drawImage(myImage, -myImage.width / 2, 0);
       contextAux.restore();

       context.save();
       context.translate(x + index * myImage.width / 2, y + index * myImage.height / 2);
       context.drawImage(canvasAux, -myImage.width / 2, 0);
       context.restore();
   }

   myImage.onload = function () {

       initCanvasAux();

       var x = 100, y = 100;

       for (var i = 0; i < 5; i++) {
           drawTile(x, y, i);
       }
   };
};