samizdatco / skia-canvas

A GPU-accelerated 2D graphics environment for Node.js
MIT License
1.7k stars 66 forks source link

Some composite operations do not work correctly #62

Closed EvenTorset closed 2 years ago

EvenTorset commented 2 years ago

The source-in, source-out, destination-atop, and copy composite operations seem to always draw the source layer as if it was completely black.

This script draws a green square on a canvas and then sets the composite operation to destination-atop before drawing a red square at an offset:

import { Canvas } from 'skia-canvas'

const canvas = new Canvas(200, 200)
const ctx = canvas.getContext('2d')

ctx.fillStyle = 'lime'
ctx.fillRect(70, 70, 100, 100)

ctx.globalCompositeOperation = 'destination-atop'

ctx.fillStyle = 'red'
ctx.fillRect(30, 30, 100, 100)

await canvas.saveAs('destination_atop.png')

This is what it outputs: destination_atop

The expected output would be this: expected This was produced by the browser equivalent of the script above: https://jsfiddle.net/Lo8361tv/1/ Similar problems happen with the other three values with skia-canvas: source_in source_out copy All of these black areas should be red in this case.