CanvasTexture: Strange shadow

textures
materials

#1

Canvas has not strange shadow with getCanvasDom() , such as this example in codepen, but THREE.SpriteMaterial 's params { map: new THREE.CanvasTexture( getCanvasDom() ) } has strange shadow.

function getCanvasDom() {
  var WIDTH = 512
  var canvasDom = document.createElement("canvas");
  canvasDom.width = WIDTH;
  canvasDom.height = WIDTH;
  var ctx = canvasDom.getContext("2d");
  ctx.fillStyle = "#ffffff";
  ctx.strokeStyle = "#ffffff";
  ctx.arc( WIDTH / 2, WIDTH / 2, 250, 0, 2*Math.PI, true );
  ctx.fill();

  return canvasDom;
}

white canvas demo

white canvas for CanvasTexture demo
image


#2

Seems to be a blending issue. Setting the blending property of the sprite’s material to NoBlending removes the artifact: https://codepen.io/anon/pen/maaopG

An other options is the set the transparent property to false (SpriteMaterial is transparent per default).