darker実装の為のテスト

Godが降りてきた（・∀・）

by ethertank

CSS

canvas{box-shadow:0 2px 8px #000;margin:10px;border:10px solid #000;}

JavaScript

var c = document.createElement("canvas");
c.width = 200;
c.height = 200;
document.body.appendChild(c);

var ctx = c.getContext('2d');
ctx.save();
ctx.fillStyle = "#00f";
ctx.fillRect(0, 0, 200, 200);
ctx.globalCompositeOperation = "darker";
ctx.fillStyle = "#ff0";
ctx.fillRect(50, 50, 100, 100);
ctx.restore();



var c2 = document.createElement("canvas");
c2.width = 200;
c2.height = 200;
document.body.appendChild(c2);

var ctx2 = c2.getContext("2d");

ctx2.fillStyle = "#ff0"; //inverted #00f
ctx2.fillRect(0, 0, 200, 200);
ctx2.globalCompositeOperation = "lighter"; // inverted darker
ctx2.fillStyle = "#00f"; //inverted #ff0
ctx2.fillRect(50, 50, 100, 100);
ctx2.restore();

var imageData = ctx2.getImageData(0, 0, 200, 200);
var data = imageData.data;

// invert all of ctx2's data
for (var i = 0; i < data.length; i += 4) {
    data[i] = 255 - data[i]; //R
    data[i + 1] = 255 - data[i + 1]; //G
    data[i + 2] = 255 - data[i + 2]; //B
}

// put!
ctx2.putImageData(imageData, 0, 0);

// yeah!（・∀・）
document.body.appendChild(c2);