# HTML Canvas API - research

**URL:** <https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266>\
**Category:** UXP Plugin API\
**Tags:** research\
**Created:** [February 8, 2022, 6:51pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266 "2022-02-08T18:51:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![pkrishna](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pkrishna/32/1977_2.png) [@pkrishna](https://forums.creativeclouddeveloper.com/u/pkrishna)\
**Post date:** [February 8, 2022, 6:51pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/1 "2022-02-08T18:51:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [February 9, 2022, 5:03pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/2 "2022-02-09T17:03:29Z")

</div>

I would like to have possibility to have:

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

---

<div class="post-metadata">

**Author:** ![Dejeffo](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/dejeffo/32/2366_2.png) [@Dejeffo](https://forums.creativeclouddeveloper.com/u/Dejeffo)\
**Post date:** [February 9, 2022, 11:34pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/3 "2022-02-09T23:34:01Z")

</div>

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

https://codepen.io/Dejeffo/embed/preview/maKKPo?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=maKKPo  
https://codepen.io/Dejeffo/embed/preview/MWaWXML?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=MWaWXML

Hope it helps

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [March 17, 2022, 2:33pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/4 "2022-03-17T14:33:30Z")

</div>

@pkrishna This is must have: [CanvasRenderingContext2D.globalCompositeOperation - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)

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

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [March 17, 2022, 2:58pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/5 "2022-03-17T14:58:43Z")

</div>

> [@Jarda](#):
>
> it might be preferable to calculate pixels the same way as Photoshop does.

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 😃

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [March 17, 2022, 3:34pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/6 "2022-03-17T15:34:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [March 17, 2022, 3:38pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/7 "2022-03-17T15:38:09Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![svumme](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/svumme/32/1289_2.png) [@svumme](https://forums.creativeclouddeveloper.com/u/svumme)\
**Post date:** [May 20, 2022, 9:51am UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/8 "2022-05-20T09:51:46Z")

</div>

@pkrishna , are there any news for the canvas?

---

<div class="post-metadata">

**Author:** ![pkrishna](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pkrishna/32/1977_2.png) [@pkrishna](https://forums.creativeclouddeveloper.com/u/pkrishna)\
**Post date:** [May 25, 2022, 9:07pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/9 "2022-05-25T21:07:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![morph3us](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/morph3us/32/3099_2.png) [@morph3us](https://forums.creativeclouddeveloper.com/u/morph3us)\
**Post date:** [November 1, 2022, 1:43pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/10 "2022-11-01T13:43:14Z")

</div>

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! 😃 )

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

---

<div class="post-metadata">

**Author:** ![morph3us](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/morph3us/32/3099_2.png) [@morph3us](https://forums.creativeclouddeveloper.com/u/morph3us)\
**Post date:** [December 2, 2022, 11:06am UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/11 "2022-12-02T11:06:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![photonic](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/photonic/32/2513_2.png) [@photonic](https://forums.creativeclouddeveloper.com/u/photonic)\
**Post date:** [December 2, 2022, 5:09pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/12 "2022-12-02T17:09:39Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![pkrishna](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pkrishna/32/1977_2.png) [@pkrishna](https://forums.creativeclouddeveloper.com/u/pkrishna)\
**Post date:** [December 2, 2022, 6:20pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/13 "2022-12-02T18:20:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\
**Post date:** [December 2, 2022, 9:16pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/14 "2022-12-02T21:16:26Z")

</div>

> [@morph3us](#):
>
> As you asked for possible use cases:  
> 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 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.

---

<div class="post-metadata">

**Author:** ![morph3us](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/morph3us/32/3099_2.png) [@morph3us](https://forums.creativeclouddeveloper.com/u/morph3us)\
**Post date:** [December 5, 2022, 2:08pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/15 "2022-12-05T14:08:40Z")

</div>

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! 🙂

---

<div class="post-metadata">

**Author:** ![photonic](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/photonic/32/2513_2.png) [@photonic](https://forums.creativeclouddeveloper.com/u/photonic)\
**Post date:** [December 7, 2022, 2:33am UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/16 "2022-12-07T02:33:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pkrishna](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pkrishna/32/1977_2.png) [@pkrishna](https://forums.creativeclouddeveloper.com/u/pkrishna)\
**Post date:** [April 21, 2023, 5:31am UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/17 "2023-04-21T05:31:14Z")

</div>

Hello everyone, just wanted to share some good news. [Canvas APIs (basic shapes)](https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-js/Global%20Members/HTML%20Elements/HTMLCanvasElement/) 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 🙂

---

<div class="post-metadata">

**Author:** ![Maher](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/maher/32/1432_2.png) [@Maher](https://forums.creativeclouddeveloper.com/u/Maher)\
**Post date:** [April 21, 2023, 11:57am UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/18 "2023-04-21T11:57:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pkrishna](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pkrishna/32/1977_2.png) [@pkrishna](https://forums.creativeclouddeveloper.com/u/pkrishna)\
**Post date:** [April 21, 2023, 5:01pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/19 "2023-04-21T17:01:26Z")

</div>

Yes, please use [this doc](https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-js/Global%20Members/HTML%20Elements/HTMLCanvasElement/) and follow the links.

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [September 13, 2023, 6:21pm UTC](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266/20 "2023-09-13T18:21:08Z")

</div>

I really need these:

```javascript
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.

[Next page](https://forums.creativeclouddeveloper.com/t/html-canvas-api-research/4266.md?page=2)
