HTML Canvas API - research

Hello from the UXP Team,
We are evaluating support of HTML Canvas APIs in UXP. In order to do so, I need some input from you all. I would love to get a sample, screen shot or any quick peek to understand what you intend to build or may have already built using canvas APIs. Although this is just an assessment, it would be of great help.

1 Like

I would like to have possibility to have:

  1. direct pixel manipulation read and write
  2. place “Blob” containing image into the canvas
4 Likes

Here are some sample projects I made with the Canvas API;


Hope it helps

1 Like

@pkrishna This is must have: CanvasRenderingContext2D.globalCompositeOperation - Web APIs | MDN

Compositing layers together. It might be preferable to calculate pixels the same way as Photoshop does.

1 Like

Are there any differences between Photoshop’s blend mode algorithm and the MDN standard? I haven’t noticed any yet. I always thought the math is pretty straight forward and that all technologies implement it the same way :smiley:

There are mutliple blending modes and I think that e.g. in Gimp some of them are a bit different than in PS. Also recently I did bitmap compositing outside of Photoshop and when I compared that I found out that some pixels differs e.g. by value of 1-3 (range 0-255). I think this was mostly due to different rounding implementation in Jimp. Also photoshop has its own color settings where you can adjust blending. And e.g. when you blend text it work differently than rasterized text. Depends on your settings.

And Lab color space is chapter on its own. I spend days to find out how to convert RGB <-> Lab the same way as Photoshop but it turned out it is unpredictable blackbox. There might even be some lookup tables.

1 Like

Color spaces are another good point. Websites are fine with RGBA 8/bit per channel. But in Photoshop we might need something more. Also if there would be easy to way to load PSD/TIFF and other less web common format into canvas that would be great :slight_smile:

1 Like

@pkrishna , are there any news for the canvas?

We are hoping that phase1 is made available by the end of this year.

4 Likes

This is great news! I have been wanting that so badly for a while.
I’m happy I found this thread and am eagerly awaiting the update.
( You only have a month left now, so its not too long anymore! :smiley: )

As you asked for possible use cases:
(Sorry, because I am a new user I had to butcher the links… Just delete the spaces in each line.)
paperjs .org/examples/
canvasjs .com/html5-javascript-spline-chart/
cssscript .com/dynamic-flow-chart-library-with-createjs-flowjs/
amcharts .com/javascript-maps/
particles .js.org

1 Like

A month later and the year is closing in…
I wonder, could we have an update on the state of affairs?
I have sent a private message to padma, but did not get an answer, so please forgive my double post.

Hello @pkrishna ! This is great to know. Is thought to have canvas in a webgl / webgl2 context ?

A plugin that I have been developing for more than a year was made specially with the help of WebGl using CEP and it works like a charm but UXP at the moment doesn’t support webgl.

I work heavily with shaders so having WebGl feature would be just what I’ve been looking for to keep my plugin as a plugin inside Photoshop and not as an external app that needs to be called through UXP.

Please tell me WebGL is on the plans <3!

Hello all, HTML Canvas APIs couldnt make it on time for this year, apologies for that. But it is going to be a part of UXP 7.0. The ETA is January but it might be slightly longer before PS releases UXP v7.0.

We will be supporting the Webgl 2D apis. For 3D, our recommendation is to use Webview, which will be available in panels, and not just dialogs, in UXP v6.4.

6 Likes

+1 on testing libraries that require canvas.

That’s what plugin authors are doing. It will let you see all the errors / apis that they or the libraries will need.

Good to hear. Typically, if bigger companies do not talk about planned features anymore, they shelved them. So I was a tiny bit worried for a second. Thank you for the update on the topic, I am patiently waiting! :slight_smile:

1 Like

@morph3us Your comment is an amazing piece of feedback for me as a software developer so I’m thankful to read it. I’m going to apply this with the users who buy my software, you are totally right.

Hello everyone, just wanted to share some good news. Canvas APIs (basic shapes) are available in PS v24.4. We are working on adding animations in the next phase.
Would love to know how you use these APIs in your plugins :slight_smile:

2 Likes

thank you for the update, much appreciated!
is there a list of un/supported methods?

Yes, please use this doc and follow the links.

3 Likes

I really need these:

const imageData = new ImageData(pixels, WIDTH, HEIGHT);
ctx.putImageData(imageData, 0, 0);

I need to create a buffer with bitmap and then just place it into canvas.

2 Likes