Так что я пытаюсь использовать globalCompositeOperation
для объекта в элементе <canvas>
, но моя цель состоит в том, чтобы смешать объект с видом холста - простой элемент разметки html как абзац.Использовать globalCompositeOperation с элементами вне элемента canvas
Моя конечная цель будет переворачивая содержимое на странице с помощью difference
как так
Мой существующий код ниже. Возможно ли это?
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