CanvasTexture: Strange shadow



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 );

  return canvasDom;

white canvas demo

white canvas for CanvasTexture demo


Seems to be a blending issue. Setting the blending property of the sprite’s material to NoBlending removes the artifact:

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