How to resolve distortion resulting from canvas texture applied to non-rectangular ThreeJS quad mesh

Question

This CodePen demonstrates the issue I am trying to resolve ( tested with Chrome & Firefox)

Notice that the rendered text and orange block are distorted near the seam. Not sure why this is happening since the triangles forming the quad share the same vertices?

var COMPONENT_SCREEN_W = 192,
    COMPONENT_SCREEN_H = 160,
    FINAL_SCREEN_W = 256,
    FINAL_SCREEN_H = 256,
    QUAD = [{
      x: -2,
      y: 228
    }, // TL corner
    {
      x: -22,
      y: -173
    }, // BL corner
    {
      x: 322,
      y: -266
    }, // BR corner
    {
      x: 348,
      y: 220
    }, // TR corner
  ],
  canvas,
  ctx,
  camera, scene, renderer, geometry, texture, mesh;

function makeCanvas(id, w, h) {
  var elem = document.createElement('canvas');
  elem.id = id;
  elem.width = w;
  elem.height = h;
  return Object.assign(elem);
}

function setupCanvas(ctx, smoothingEnabled) {
  ctx.mozImageSmoothingEnabled = smoothingEnabled;
  ctx.msImageSmoothingEnabled = smoothingEnabled;
  ctx.imageSmoothingEnabled = smoothingEnabled;
  ctx.oImageSmoothingEnabled = smoothingEnabled; /* Opera */
  ctx.webkitImageSmoothingEnabled = smoothingEnabled; /* Safari */
}

initDemo();
animateDemo();

function initDemo() {
  var demoWidth = window.innerWidth;
  var demoHeight = window.innerHeight;
  canvas = makeCanvas('canvas', FINAL_SCREEN_W, FINAL_SCREEN_H);
  ctx = canvas.getContext('2d');

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(demoWidth, demoHeight);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(70, demoWidth / demoHeight, 1, 1000);
  camera.position.x = 100;
  camera.position.y = 100;
  camera.position.z = 200;
  scene.add(camera);
  texture = new THREE.Texture(canvas);
  var material = new THREE.MeshBasicMaterial({
    map: texture
  });

  var geom = new THREE.Geometry();
  geom.vertices.push(new THREE.Vector3(QUAD[0].x, QUAD[0].y, 0));
  geom.vertices.push(new THREE.Vector3(QUAD[1].x, QUAD[1].y, 0));
  geom.vertices.push(new THREE.Vector3(QUAD[2].x, QUAD[2].y, 0));
  geom.vertices.push(new THREE.Vector3(QUAD[3].x, QUAD[3].y, 0));
  geom.faces.push(new THREE.Face3(0, 1, 2));
  geom.faces.push(new THREE.Face3(2, 3, 0));
  geom.computeFaceNormals();
  geom.faceVertexUvs[0] = [];
  geom.faceVertexUvs[0].push([new THREE.Vector2(0, 1), new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), ]);
  geom.faceVertexUvs[0].push([new THREE.Vector2(1, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1), ]);
  geom.uvsNeedUpdate = true;

  mesh = new THREE.Mesh(geom, material);
  mesh.rotation.y = 0.1; // 0.2;
  scene.add(mesh);

  setupCanvas(ctx, true);

  requestAnimationFrame(animateDemo);
}

function animateDemo() {
  drawCanvas(ctx);
  texture.needsUpdate = true;
  renderer.render(scene, camera);
  requestAnimationFrame(animateDemo);
}

function drawCanvas(ctx) {
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, COMPONENT_SCREEN_W, COMPONENT_SCREEN_H);
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, COMPONENT_SCREEN_W - 20, COMPONENT_SCREEN_H - 20);
  ctx.fillStyle = 'black';
  ctx.fillStyle = 'orange';
  ctx.fillRect(20, 40, 50, 10);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(60, 40, 50, 10);
  ctx.fillStyle = 'blue';
  ctx.fillRect(120, 40, 50, 10);

  ctx.font = '16pt Arial';
  ctx.fillStyle = 'blue';
  for(var j=20; j<=140; j+=20) {
    ctx.fillText('TEXT TEXT TEXT', 4, j);      
  }  
}

Thanks, Joey