Home/ Questions/Q 6168325
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T22:40:03+00:00

I have run into an issue when attempting to globalCompositeOperation to mask/blend shapes and

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0