Extending the HTML Canvas API

InDesign
,
1

Hello everyone

here is the question from Wednesday’s Office Hours to the Canvas API with more details.

It’s great that the canvas element is now available and that you can draw shapes. What also would be very helpful are pixel manipulations with Canvas.

I’m thinking of these two methods, for example:

drawImage()

getImageData()

My specific use case is that an image is displayed on the canvas element. The user draws a marker or a cutout on that image, which is then sent to a web API for further analysis.

Here are a few more use cases from the Photoshop colleagues:

Roland

2

Put image data:

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

It is so confusing to release canvas API without canvas API.
Having putImageData would allow people to display pictures and do per-pixel manipulation (i.e. drawing, changing colors).

Vector API is useful, but for Photoshop plugins it is much more important to have per-pixel access to the canvas, so the canvas could be updated efficiently.

1 Like
3

A non efficient way to display pixels:

var image = document.createElement('img');

image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";

image.width=100;
image.height=100;
image.alt="here should be some image";

document.body.appendChild(image);

You need encode into gif/jpg/png though, which could be non-trivial, but doable (or just ask some external service to provide you with base64 version over a websocket).