StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFabricJS: bug with opacity of circles in a group?
text
Body
copied!<p>When I add a circle with an opacity lower than 1 to a group, its opacity becomes actually lower than the specified value. This does not happen if I don't specify opacity (i.e., opacity = 1). It also doesn't happen with a rectangle.</p> <p>Here is the code to reproduce this issue:</p> <h1>HTML</h1> <pre><code><canvas id="stage" width="400" height="300"> </code></pre> <h1>JavaScript</h1> <pre><code>var OPACITY = 0.65; var FILL = '#fff'; var canvas = new fabric.Canvas('stage', { backgroundColor: '#222' }); /** * Rectangles * both appear to have the same color */ var rect1 = new fabric.Rect({ width: 40, height: 40, fill: FILL, opacity: OPACITY, left: 60, top: 60 }); canvas.add(rect1); var rect2 = new fabric.Rect({ width: 40, height: 40, fill: FILL opacity: OPACITY, }); var rect2Group = new fabric.Group([rect2], { left: 120, top: 60 }); canvas.add(rect2Group); /** * Circles * the second circle is darker */ var circle1 = new fabric.Circle({ radius: 20, fill: FILL, opacity: OPACITY, left: 60, top: 120 }); canvas.add(circle1); var circle2 = new fabric.Circle({ radius: 20, fill: FILL, opacity: OPACITY, }); var circle2Group = new fabric.Group([circle2], { left: 120, top: 120 }); canvas.add(circle2Group); </code></pre> <p>Here is the <a href="http://jsfiddle.net/pYhRV/" rel="nofollow">JSFiddle</a>.</p> <p>If you run it, you can see that the second circle is darker than the first one, meaning that its opacity is lower.</p> <p>Am I doing something wrong, or is this a bug? (Could be reproduced in 1.2.0 and 1.3.0.)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload