Sampling Canvas Data (getImageData)

[joakin]

Sampling Canvas Data (getImageData)

[joakin]

Depending on what you are doing there may be different ways of going about it.

If you just want to read the canvas pixels and calculate things, I recommend using ports and doing so on JS, because Elm doesn't support converting Uint8ClampedArray from JS easily to elm-bytes.

If you want to paint ImageData into the canvas, either

1. do it in JS every time after you render in Elm (with a requestAnimationFrame to let Elm flush updates to the DOM),
2. or you can put your imageData in to a hidden canvas, make an Image with ctx.toDataURL and then pass it back to Elm and use Texture.fromDomImage to draw to the canvas in Elm.

If you explain your use case and it is important to add first class support in the library, we can talk about adding other Texture.fromXXX methods, in this case something like Texture.fromImageData or something like that.

[tortis]

I'm hoping to implement a flood fill tool on top of your drawing example. I guess I could send the message through a port then implement it in javascript, but it would be nice if I could write it in elm.

Do you think using a port to pass image data as array into Elm, doing the flood fill, then passing the image data back to JS to put onto the canvas would work? Do you think that would have poor performance?

Thanks for your help!

[janwirth]

@tortis I usually monkey-patch elements to exhibit specific getters for the stuff I want in elm. Then I listen to events and use event.target to get the data.

Example:
    HTMLElement.prototype.__defineGetter__("boundingClientRect", function() {
        return this.getBoundingClientRect();
    });

Within the hander you can also call ctx.toDataURL or whatever you please.