draw RGBA byte array to canvas

[Brandon Butler]

Is there a way I could draw an RGBA byte array to the canvas using this library?

[Stefan Lörwald]

Hi @Hackmodford,

I don't recall seeing this option in the canvas API and this library doesn't add much fancy things on top. I'd imagine that there's an Image API to create images from byte arrays, which you could wrap to create images, then pass them on to this library. Creating Images or any other JS objects is out of scope for this library.

Hope that helps
Stefan

[Brandon Butler]

It seems that I should be able to use putImageData and modify the byte array of an imageData object. But that happens on the JS side of things.

[Stefan Lörwald]

Hi @Hackmodford,

It's still not quite clear to me what the ask is here. Could you please show code?

Thanks
Stefan

[gmkado]

Hi @stefanloerwald I'd also be interested in this feature. I think what @Hackmodford is referring to is documented here:
https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data#examples

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 100);

// Fill the array with RGBA values
for (let i = 0; i < imageData.data.length; i += 4) {
  // Percentage in the x direction, times 255
  let x = ((i % 400) / 400) * 255;
  // Percentage in the y direction, times 255
  let y = (Math.ceil(i / 400) / 100) * 255;

  // Modify pixel data
  imageData.data[i + 0] = x; // R value
  imageData.data[i + 1] = y; // G value
  imageData.data[i + 2] = 255 - x; // B value
  imageData.data[i + 3] = 255; // A value
}

// Draw image data to the canvas
ctx.putImageData(imageData, 20, 20);

[Stefan Lörwald]

The skeleton of this is implemented, see https://github.com/excubo-ag/Blazor.Canvas/blob/main/Canvas%2FContexts%2FContext2D_PixelManipulation.cs#L50.
However, setting any of the imagedata pixels is not supported here. The design of this library is based on individual or batched calls to the JS Api. Setting thousands of pixels individually would likely result in very bad performance and is for that reason not planned.