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

Thank you for reply. I’m not sure what is wrong or not setting correctly for this demo.

Setting the transparent property to true with WebGLRenderer.alpha: false :

The result looks OK:

But I want to set WebGLRenderer.alpha: true, the SpriteMaterial isn’t a circular:


Before diving into the details of transparency and blending, why do you need this setting?

I wanna to make a simple project without TextureLoader, I choose other way CanvasTexture to finish this project, but it’s not my expectation.

Not good (CanvasTexture) screenshot:

BTW, I try to use TextureLoader with “white_circle_bg.png”, it looks OK.

Good (TextureLoader) screenshot:

Instead of drawing the texture at runtime via the Canvas 2D API, have you considered to serialize the image as base64 and use it as a data source for an Image object? The approach looks like this:

Notice the small red dot in the HTML view. Of course the alternative is to just load the image from the backend via TextureLoader.

Thank you for reply. Sorry, it doesn’t work. I try to serialize the image as base64 as:

var texture = new THREE.TextureLoader().load(

Finally, I found TextureLoader and CanvasTexture are prototype Texture. I tried to debug I found anything, I am not sure the strange shadow when is it generated.



It seems to work by setting premultipliedAlpha of your sprite’s material to true: