This is sub-layout for documentation pages

Top

Blend modes allow to digitally edit an image. Here, we are interested mainly in image tinting, but it can be used for whatever effect.

We are using HTML canvas to draw the images. Unfortunately, there does not seem to be a way of getting image pixel data other than using getImageData function
The following code allows to get pixel data of a rectangle

    var data: ImageData = ctx.getImageData(x, y, image.naturalWidth, image.naturalHeight);
  

It extracts the actual pixels of the canvas.
putImageData function allows to set pixel data back to the canvas

    ctx.putImageData(data, x, y);
  

Note: Unless there is some more clever way of pixel manipulation built in the canvas and draw context JS system, then I bet that this approach is used also for general texture drawing

2.1 Processing

Suppose, that target texture of size \(300, 100\) is supposed to be drawn with a blend mode.

We first extract the pixels from the canvas on the target rectangle, where the texture will be drawn Then we draw the wanted image into the canvas (which does not matter, because we have the pixel data backuped) We extract the drawn pixels again to get them to the memory Then, we can perform whatever blend operation with the two rectangles full of pixel data, and finally, we put the blended result back to the canvas

Let overlay layer be an image, which will be drawn above the base layer, and a blend mode will be applied to it Let base layer be an image, which will be drawn under the overlay layer Let \(A\) be set of pixels of a base layer. Let \(B\) be set of pixels of the overlay layer. Let \(a\) be one fragment of a pixel (R/G/B/A) from \(A\) Let \(b\) be one fragment of a pixel (R/G/B/A) from \(B\) Let \(e\) be the result of a blend of \(a\) and \(b\)

3.1 Multiply

\(e=a*b\)

3.2 Overlay

\(e=\frac{a}{255} * (a+ \frac{2*b} {255} * (255 - a))\)