window.onload = function() {
	neonLightEffect();
};


(function() {
	var PROPERTIES = {
		position: "absolute",
		visibility: "hidden",
		display: "block"
	};
	window.getDimensions = function(element) {
		var previous = {};
		for (var key in PROPERTIES) {
			previous[key] = element.style[key];
			element.style[key] = PROPERTIES[key];
		}
		var result = {
			width: element.offsetWidth,
			height: element.offsetHeight
		};
		for (key in PROPERTIES) {
			element.style[key] = previous[key];
		}
		return result;
	};
})();

function getFontDimensions(text, font) {
	var elem = document.createElement("span");
	elem.style.font = font;
	elem.textContent = text;
	elem.style.display = "none";
	document.body.appendChild(elem);
	var dimensions = getDimensions(elem);
	document.body.removeChild(elem);
	return dimensions;
}




function neonLightEffect() {
	var canvas = document.getElementById("mycanvas")
	var ctx = canvas.getContext("2d");

//	var text = "alert('"+String.fromCharCode(0x2665)+"')";
	var text = "alert('"+String.fromCharCode(0x2605)+"')";
	var font = "120px sans-serif";
	var jitter = 25; // ジッターの最大距離
	var blur = 100;
	var x = ctx.canvas.width / 2;			// キャンバスの真ん中に書く
	var y = ctx.canvas.height / 2;

	// クリッピング領域を設定する
	ctx.save();
	ctx.font = font;
	ctx.textBaseline = "middle";
	ctx.textAlign = "center";
	var rc = getFontDimensions(text, font);
	var width = rc.width + blur * 2;
	var height = rc.height + blur * 2;
	var cx = x - rc.width / 2;
	var cy = y - rc.height / 2;
	ctx.rect(cx - blur, cy - blur, width, height);
	ctx.clip();

	// クリッピング領域外に文字を描画
	// シャドウ（黒）のみクリッピング領域の中に入る
	ctx.save();
	ctx.fillStyle = "#fff";
	ctx.shadowColor = "rgba(0,0,0,1)";
	ctx.shadowOffsetX = rc.width + blur;
	ctx.shadowOffsetY = 0;
	ctx.shadowBlur = blur;
	ctx.fillText(text, x - rc.width - blur, y);
	ctx.restore();

	// グラデーション描画
	// 先ほど描画した黒いシャドウの上からsource-atopで描画することで
	// シャドウの部分のみグラデーションで描画される
	var gradient = ctx.createLinearGradient(0, 0, rc.width, 0);
	gradient.addColorStop(0, "rgba(255, 0, 0, 1)");
	gradient.addColorStop(0.15, "rgba(255, 255, 0, 1)");
	gradient.addColorStop(0.3, "rgba(0, 255, 0, 1)");
	gradient.addColorStop(0.5, "rgba(0, 255, 255, 1)");
	gradient.addColorStop(0.65, "rgba(0, 0, 255, 1)");
	gradient.addColorStop(0.8, "rgba(255, 0, 255, 1)");
	gradient.addColorStop(1, "rgba(255, 0, 0, 1)");
	ctx.globalCompositeOperation = "source-atop";
	ctx.fillStyle = gradient;
	ctx.fillRect(cx - blur, cy - blur, width, height);

	// グラデーションをlighterモード(色の加算)で重ねて描画
	ctx.globalCompositeOperation = "lighter";
	ctx.globalAlpha = 0.7
	ctx.drawImage(ctx.canvas, 0, 0);
	ctx.drawImage(ctx.canvas, 0, 0);

	// テキスト描画
	ctx.globalAlpha = 1
	ctx.fillStyle = "rgba(255,255,255,0.95)";
	ctx.fillText(text, x, y);

	// ジッター（文字の外形）描画
	ctx.lineWidth = 0.80;
	ctx.strokeStyle = "rgba(255,255,255,0.25)";
	var i = 10; while(i--) {
		var left = jitter / 2 - Math.random() * jitter;
		var top = jitter / 2 - Math.random() * jitter;
		ctx.strokeText(text, left + x, top + y);
	}
//	ctx.strokeStyle = "rgba(0,0,0,0.20)";
//	ctx.strokeText(text, x, y);
	ctx.restore();
};