HTMLCanvas radial gradient not working

Photoshop UXP Plugin API
, ,
1

I’m trying to use the canvas 2d radial gradient but I’m not being successful at it, I thought I was doing something wrong but I already tried in the browser the same code and it works in the browser and not in UXP.

I tried with same code using linear gradient and it works, but radial gradient isn’t working.

Here’s the code for the linear gradient:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
// const gradient = ctx.createRadialGradient(150, 150, 0, 150, 150, 100);
const gradient = ctx.createLinearGradient(0, 0, 300, 0);

gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "green");

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300);

image
image1281×475 3 KB

Now if I comment the linear gradient and uncomment the radial gradient it doesn’t work, same settings:

  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");
  const gradient = ctx.createRadialGradient(150, 150, 0, 150, 150, 100);
  // const gradient = ctx.createLinearGradient(0, 0, 300, 0);

  gradient.addColorStop(0, "blue");
  gradient.addColorStop(1, "green");

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 300, 300);

I already tried in the browser and it works but in UXP isn’t working so this must be a but or it is not implemented yet?

2

Canvas has only very few things implemented. You can’t even set the pixmap. Radial gradient should work in CSS.

But I see radial gradient as documented https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-js/Global%20Members/HTML%20DOM/CanvasRenderingContext2D/#createradialgradientx0-y0-r0-x1-y1-r1

1 Like
3

It is indeed documented but it doesn’t work. Why having documented things when they are not implemented yet? I hope someone from Adobe devs can see this post.

4

@Sujai Any thoughts?

1 Like