Multiply mask rect

firefox bug

by Hackerham

JavaScript

var W = 50;

var canvas = document.createElement('canvas');
canvas.width = W * 5;
canvas.height = W * 3;
document.body.appendChild(canvas);

var context = canvas.getContext('2d');
context.fillStyle = '#A0A0A0';
context.fillRect(0,0,W * 5, W * 3);

var canvas2 = document.createElement('canvas');
canvas2.width = W * 3;
canvas2.height = W * 3;
var context2 = canvas2.getContext('2d');
context2.fillStyle = '#600000';
context2.fillRect(0, 0, W * 3, W * 3);

context.save();
context.globalCompositeOperation = 'multiply';
context.beginPath();
context.rect(W, W, W, W);
context.clip();
context.drawImage(canvas2, 0, 0);
context.restore();

context.save();
context.globalCompositeOperation = 'lighter';
context.beginPath();
context.translate(2 * W, 0);
context.rect(W, W, W, W);
context.clip();
context.drawImage(canvas2, 0, 0);
context.restore();