Automattic/node-canvas

Incorrect transparent GIF blending when it's transparent color is not black

Open

#116 opened on Sep 4, 2011

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (9,524 stars) (1,140 forks)batch import
BugHelp wantedImages & Formats: GIF

Description

The value of the color marked as transparent is not discarded, but blended with background using "add" operation if the background isn't transparent.

For example, here is an image that is transparent, but the color of the transparent index in it's palette is set to #804000: transparent gif

var assert = require('assert')
var Canvas = require('canvas')

var c = new Canvas(150, 150)
var ctx = c.getContext('2d')

// fill background with something non-transparent
ctx.fillStyle = 'rgb(0, 100, 200)'
ctx.fillRect(0, 0, 150, 150)
// load the (supposedly) transparent gif
var i = new Canvas.Image()
i.src = 'transparent.gif' // https://i.imgur.com/XCz0eVi.gif
// draw it on top of our background
ctx.drawImage(i, 0, 0)
// expect no visible change in the canvas
var pixel = ctx.getImageData(0, 0, 1, 1).data
assert.deepEqual(pixel, [0, 100, 200, 255])

Contributor guide

Tech stack
javascriptnodejs
Domain
backend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Node.jscanvas moduleGIF format
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
The issue involves incorrect blending of transparent GIFs when the transparent index color is not black. The fix likely lies in the GIF decoder logic, possibly in the file `lib/gif.js` or similar. The provided test case demonstrates the expected behavior: drawing a transparent GIF over a solid background should not change pixels that are transparent. Investigate how the transparent color is handled during decoding and ensure it is discarded rather than blended with the background.