1

I have run into an issue when attempting to globalCompositeOperation to mask/blend shapes and text (shapes mask/blended with other shapes works just fine) in Chrome (more specifically I am using Chrome 12.0.7). Can anyone suggest where I might have gone astray here or suggest a workaround within the canvas element?

Here is an image showing what I'm seeing: https://i.stack.imgur.com/wRunv.jpg

Here is the code that will reproduce these results:

<!DOCTYPE HTML>
<html>
<body>

<canvas id="testCanvas" width="500" height="500"></canvas>

<script type="text/javascript">
    // setup canvas
    var tcanvas = document.getElementById("testCanvas");
    var tcontext = tcanvas.getContext("2d");

    // draw square
    tcontext.fillStyle = "#FF3366";
    tcontext.fillRect(15,15,70,70);

    // set composite property
    tcontext.globalCompositeOperation = "xor";

    // draw text
    tcontext.fillStyle="#0099FF";
    tcontext.font = "35px sans-serif";
    tcontext.fillText("test", 22, 25);
</script>

</body>
</html>
Variant
  • 17,279
  • 4
  • 40
  • 65
Ninx
  • 131
  • 2
  • 5
  • What kind of issue have you run into? Why is what you're seeing not what you want? – Paul Sonier Jul 19 '11 at 21:42
  • The use of globalCompositeOperation seems to be working as intended in Firefox and IE, however in Chrome trying to blend text and shapes seems to be working differently. For the particular xor example, the part of the text that overlaps with the square should be white. This can be seen in the image that I linked in the original question. – Ninx Jul 19 '11 at 22:59

1 Answers1

1

seems like the XOR globalCompositeOperation problem is a chrome bug that happens only with fillText.

Other drawing methods seem to work, see here: http://jsfiddle.net/Y5wvb/

You should report this bug to the Chromium project: http://code.google.com/p/chromium/issues/list
When you do, post the url of the posted issue here to we can vote it up :)

I found out that if you change the order of drawing, e.g. draw the text before filling the rectangle, the XOR works just fine. see here: http://jsfiddle.net/Y5wvb/1/

Variant
  • 17,279
  • 4
  • 40
  • 65
  • I have reported the bug to the Chromium project which can be found here: http://code.google.com/p/chromium/issues/detail?id=89881 Thank you so much for the workaround on this and for introducing me to jsfiddle! – Ninx Jul 20 '11 at 15:24
  • 1
    Just an update: the bug is still present in current Firefox and Chrome and the bug report has been closed due to lack of interest. – cprn Mar 01 '15 at 00:30