将globalCompositeOperation与canvas元素之外的元素一起使用

Question

So I'm trying to use globalCompositeOperation on an object within a <canvas> element but my goal is to blend with an object outide of the canvas - a plain html markup element like a paragraph.

My end goal will be inverting the content on the page using difference like so

My existing code is below. Is this even possible?

var canvas = document.getElementById('canvas');
window.onresize=function(){
  "use strict";
  var winMin = Math.min(window.innerWidth,window.innerHeight);
  canvas.width = winMin;
  canvas.height = winMin;
  var w = winMin / 3;
  var ctx = canvas.getContext('2d');
  ctx.globalCompositeOperation = 'multiply';
  ctx.globalAlpha = .5;
  //magenta
  ctx.fillStyle = 'rgb(255,0,255)';
  ctx.beginPath();
  ctx.arc(w, w, w, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();
  //cyan
  ctx.fillStyle = 'rgb(0,255,255)';
  ctx.beginPath();
  ctx.arc(w*2, w, w, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();

};
window.onresize();

Codepen: http://codepen.io/jeremypbeasley/pen/NqwGoO

Answer 1

The globalCompositeOperation blending operations define how pixels backed by the canvas element blend with fragments to be written to that backing. That has nothing to do with pixels that live in some other dimension of the web page, like the DOM. Total rasterization of the canvas occurs and some other graphics system composites the pixels of the canvas onto the pixels of the rest of the web page. Reflow of the web page could happen at any time, but that does not mean that the canvas would be re-rasterized, just re-composited, in which case the globalCompositeOperation s would have no effect and you wouldn't see the photo negative effect you desire.