fliedonion/ballAndDialog.js

## ballAndDialog.js

function drawBalls(){
  // 描画しているだけ
  var BALL = 4, R = 4, W=100, H=100;
  var canvas = document.querySelector("#canvas");
  var ctx = canvas.getContext("2d");
  canvas.addEventListener("contextmenu", function(e){e.preventDefault(); clear();});
  ctx.globalCompositeOperation = "source-over";

  for(var i = 0; i < BALL; i++){
    for(var j = 0; j < BALL; j++){
      var x = (i+0.5*j+0.25)*W/BALL, y = (j+0.25)*H/BALL;
      if(x > W) x = R;
      ctx.beginPath();
      var r = (Math.random()*0x8F + 0x50) & 0xFF;
      var g = (Math.random()*0x4F + 0xB0) & 0xFF;
      var b = (Math.random()*0x8F + 0x70) & 0xFF;
      // var r = ((color >> 16) + 0x33) & 0xFF, g = (color >> 8) & 0xFF, b = color & 0xFF;
      var grad = ctx.createRadialGradient(x,y,R,x,y,R*2);
      grad.addColorStop(0.0 , "rgba(" + r + ", " + g + ", " + b + ", 1.0)");
      grad.addColorStop(1.0 , "rgba(" + r + ", " + g + ", " + b + ", 0)");
      ctx.fillStyle = grad;
      ctx.arc(x, y, R*2, 0, Math.PI*2, false);
      ctx.fill();
    }
  }
}

drawBalls();

function showDialog(){
  //ダイアログ表示
  var canvas = document.querySelector("#canvas");
  var img = document.querySelector("#img");
  img.src = canvas.toDataURL("image/png");

  var cover = document.querySelector("#overwrap");
  var dlg = document.querySelector("#dialog");

  cover.style.display= 'block';
  dlg.style.left="50px";
  dlg.style.top="50px";
  dlg.style.display= 'block';
}

function hideDialog(){
  //ダイアログ閉じる
  var cover = document.querySelector("#overwrap");
  var dlg = document.querySelector("#dialog");
  cover.style.display= 'none';
  dlg.style.display= 'none';

}

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>use canvas image in dialog sample.</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="style.css">
  <script src="ballAndDialog.js"></script>
  <!-- http://output.jsbin.com/xakevajage/1/edit?html,css,js,output -->
</head>
<body>
  <canvas id="canvas" style="background-color:white" width="100" height="95"></canvas>
  <input type="button" onclick="showDialog()" value="open">

  <!-- ダイアログ用div -->
  <div id="dialog">
    <div>
      <img id="img"><br/>
      Are you sure?<br/>
      <input type="button" onclick="hideDialog()" value="close">
    </div>
  </div>

  <!-- ダイアログ表示中、後ろを隠すためのdiv -->
  <div id="overwrap"></div>
</body>
</html>

## style.css
#dialog{
  width: 180px;
  height: 180px;
  border: 1px solid gray;
  border-radius: 8px;
  display:none;
  position: absolute;
  z-index:10;
  background-color:white;

}
#dialog > div{
  width: 160px;
  height: 160px;
  padding: 8px;
}

#overwrap{
  position:absolute;
  left:0;top:0;
  background-color: rgba(200,200,200,0.3);

  display:none;
  width:100%;
  height:100%;
}

	function drawBalls(){
	// 描画しているだけ
	var BALL = 4, R = 4, W=100, H=100;
	var canvas = document.querySelector("#canvas");
	var ctx = canvas.getContext("2d");
	canvas.addEventListener("contextmenu", function(e){e.preventDefault(); clear();});
	ctx.globalCompositeOperation = "source-over";

	for(var i = 0; i < BALL; i++){
	for(var j = 0; j < BALL; j++){
	var x = (i+0.5j+0.25)W/BALL, y = (j+0.25)*H/BALL;
	if(x > W) x = R;
	ctx.beginPath();
	var r = (Math.random()*0x8F + 0x50) & 0xFF;
	var g = (Math.random()*0x4F + 0xB0) & 0xFF;
	var b = (Math.random()*0x8F + 0x70) & 0xFF;
	// var r = ((color >> 16) + 0x33) & 0xFF, g = (color >> 8) & 0xFF, b = color & 0xFF;
	var grad = ctx.createRadialGradient(x,y,R,x,y,R*2);
	grad.addColorStop(0.0 , "rgba(" + r + ", " + g + ", " + b + ", 1.0)");
	grad.addColorStop(1.0 , "rgba(" + r + ", " + g + ", " + b + ", 0)");
	ctx.fillStyle = grad;
	ctx.arc(x, y, R2, 0, Math.PI2, false);
	ctx.fill();
	}
	}
	}

	drawBalls();

	function showDialog(){
	//ダイアログ表示
	var canvas = document.querySelector("#canvas");
	var img = document.querySelector("#img");
	img.src = canvas.toDataURL("image/png");

	var cover = document.querySelector("#overwrap");
	var dlg = document.querySelector("#dialog");

	cover.style.display= 'block';
	dlg.style.left="50px";
	dlg.style.top="50px";
	dlg.style.display= 'block';
	}

	function hideDialog(){
	//ダイアログ閉じる
	var cover = document.querySelector("#overwrap");
	var dlg = document.querySelector("#dialog");
	cover.style.display= 'none';
	dlg.style.display= 'none';

	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>use canvas image in dialog sample.</title>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="style.css">
	<script src="ballAndDialog.js"></script>
	<!-- http://output.jsbin.com/xakevajage/1/edit?html,css,js,output -->
	</head>
	<body>
	<canvas id="canvas" style="background-color:white" width="100" height="95"></canvas>
	<input type="button" onclick="showDialog()" value="open">

	<!-- ダイアログ用div -->
	<div id="dialog">
	<div>
	<img id="img"><br/>
	Are you sure?<br/>
	<input type="button" onclick="hideDialog()" value="close">
	</div>
	</div>

	<!-- ダイアログ表示中、後ろを隠すためのdiv -->
	<div id="overwrap"></div>
	</body>
	</html>
	#dialog{
	width: 180px;
	height: 180px;
	border: 1px solid gray;
	border-radius: 8px;
	display:none;
	position: absolute;
	z-index:10;
	background-color:white;

	}
	#dialog > div{
	width: 160px;
	height: 160px;
	padding: 8px;
	}

	#overwrap{
	position:absolute;
	left:0;top:0;
	background-color: rgba(200,200,200,0.3);

	display:none;
	width:100%;
	height:100%;
	}