noonworks/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>腐葉土</title>
<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>
<style>
.AlluraFont { font-family: 'Allura'; }
table, td, th {
  border-collapse: collapse;
  border:1px solid #333;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
  <th>タイトル（上）</th>
  <td><input class="f_inputs" type="text" id="title_top" name="title_top" value="ふようどっぽい" /></td>
</tr>
<tr>
  <th>タイトル</th>
  <td><input class="f_inputs" type="text" id="title_main" name="title_main" value="腐葉土本" /></td>
</tr>
<tr>
  <th>タイトル（下）</th>
  <td><input class="f_inputs" type="text" id="title_bottom" name="title_bottom" value="デザイン" /></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th></th><th>攻め</th><th>受け</th></tr>
</thead>
<tbody>
<tr>
  <th>カラー</th>
  <td><input class="f_inputs" type="color" id="color_seme" name="color_seme" value="#A541F0" /></td>
  <td><input class="f_inputs" type="color" id="color_uke" name="color_uke" value="#55AAFF" /></td>
</tr>
<tr>
  <th>名前</th>
  <td><input class="f_inputs" type="text" id="name_seme" name="name_seme" value="攻めくん" /></td>
  <td><input class="f_inputs" type="text" id="name_uke" name="name_uke" value="受けちゃん" /></td>
</tr>
<tr>
  <th>名前（背景）</th>
  <td><input class="f_inputs" type="text" id="name_seme2" name="name_seme2" value="Semekun" /></td>
  <td><input class="f_inputs" type="text" id="name_uke2" name="name_uke2" value="Ukechan" /></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
  <th>タイトル下</th>
  <td><input class="f_inputs" type="text" id="sub_text1" name="sub_text1" value="3種の" /></td>
  <td><input class="f_inputs" type="text" id="sub_text2" name="sub_text2" value="ミックス" /></td>
</tr>
<tr>
  <th>右の楕円</th>
  <td><input class="f_inputs" type="text" id="circled_text1" name="circled_text1" value="ぷるるん" /></td>
  <td><input class="f_inputs" type="text" id="circled_text2" name="circled_text2" value="新食感！" /></td>
</tr>
<tr>
  <th rowspan="3">注意事項</th>
  <td colspan="2"><input class="f_inputs" type="text" id="notice_title" name="notice_title" value="～お願い～" /></td>
</tr>
<tr>
  <td><input class="f_inputs" type="text" id="notice_text1" name="notice_text1" value="小さなお子様や中高生の方は" /></td>
  <td><input class="f_inputs" type="text" id="notice_text2" name="notice_text2" value="絶対に読まないでください。" /></td>
</tr>
<tr>
  <td><input class="f_inputs" type="text" id="notice_text3" name="notice_text3" value="本製品は男性同士の性描写を含み、耐性のない方や" /></td>
  <td><input class="f_inputs" type="text" id="notice_text4" name="notice_text4" value="18歳未満の方の購入はご遠慮いただいております。" /></td>
</tr>
</tbody>
</table>
<canvas id="maincanvas" width="420" height="600"></canvas>
<div class="AlluraFont">.</div>
<script>
(function(){
  var green = 'rgb(15,80,10)';
  var yellow = 'rgb(242,242,12)';
  var red = 'rgb(200,40,40)';
  var gold = 'rgb(175,155,95)';
  var white = 'rgb(255,255,255)';
  var black = 'rgb(0,0,0)';

  function xScaleText(text, x, y, scale, fill, stroke) {
    ctx.save();
    ctx.scale(scale, 1);
    if (stroke)
      ctx.strokeText(text, x, y);
    if (fill)
      ctx.fillText(text, x, y);
    ctx.restore();
  }

  function xScaleTextAlign(text, x1, x2, y, padding, max_scale, fill, stroke, align) {
    if (typeof align != 'string') align = 'center';
    align = align.toLowerCase();
    var width = x2 - x1;
    var w = ctx.measureText(text).width;
    var scale = width / w;
    if (max_scale > 0 && scale > max_scale) {
      scale = max_scale;
      switch (align) {
        case 'left':
          break;
        case 'right':
          padding += (width - w * scale) / scale;
          break;
        default:
          padding += (width - w * scale) / 2 / scale;
      }
    }
    xScaleText(text, x1 / scale + padding, y, scale, fill, stroke);
  }

  function pathEllipse(x1, y1, x2, y2) {
    var xr = (x2 - x1) / 2; var yr = (y2 - y1) / 2;
    var cx = (Math.sqrt(2.0) - 1.0) * xr * 4 / 3;
    var cy = (Math.sqrt(2.0) - 1.0) * yr * 4 / 3;
    ctx.beginPath();
    ctx.moveTo(x1, y1 + yr);
    ctx.bezierCurveTo(x1, y1 + yr - cy, x1 + xr - cx, y1, x1 + xr, y1);
    ctx.bezierCurveTo(x1 + xr + cx, y1, x2, y1 + yr - cy, x2, y1 + yr);
    ctx.bezierCurveTo(x2, y1 + yr + cy, x1 + xr + cx, y2, x1 + xr, y2);
    ctx.bezierCurveTo(x1 + xr - cx, y2, x1, y1 + yr + cy, x1, y1 + yr);
  }

  var background_font_color = 'rgba(255,255,255,0.8)';
  var background_font = "bold italic 56px 'Allura'";
  var background_circle_font_color = white;
  var background_circle_font = "30px 'Lucida Grande','segoe UI','Hiragino Maru Gothic ProN',Meiryo,Arial,sans-serif";
  function background(ctx, color1, color2, name_s1, name_u1, name_s2, name_u2) {
    // left back
    var grad1  = ctx.createLinearGradient(0, 0, 0, 380);
    grad1.addColorStop(0, color1);
    grad1.addColorStop(1, white);
    ctx.fillStyle = grad1;
    ctx.fillRect(0, 25, 210, 275);
    // left name
    ctx.fillStyle = background_font_color;
    ctx.font = background_font;
    xScaleTextAlign(name_s2, 10, 200, 70, -3, 1.5, true, false);
    // right back
    var grad2  = ctx.createLinearGradient(0, 0, 0, 380);
    grad2.addColorStop(0, color2);
    grad2.addColorStop(1, white);
    ctx.fillStyle = grad2;
    ctx.fillRect(210, 25, 210, 275);
    // left name
    ctx.fillStyle = background_font_color;
    ctx.font = background_font;
    xScaleTextAlign(name_u2, 220, 410, 70, -3, 1.5, true, false);
    // left circle
    pathEllipse(40, 67, 180, 137);
    ctx.fillStyle = yellow;
    ctx.fill();
    pathEllipse(43, 70, 177, 134);
    ctx.fillStyle = color1;
    ctx.fill();
    // name on left circle
    ctx.fillStyle = background_circle_font_color;
    ctx.font = background_circle_font;
    xScaleTextAlign(name_s1, 50, 170, 113, 0, 1.5, true, false);
    // right circle
    pathEllipse(250, 67, 390, 137);
    ctx.fillStyle = yellow;
    ctx.fill();
    pathEllipse(253, 70, 387, 134);
    ctx.fillStyle = color2;
    ctx.fill();
    // name on left circle
    ctx.fillStyle = background_circle_font_color;
    ctx.font = background_circle_font;
    xScaleTextAlign(name_u1, 260, 380, 113, 0, 1.5, true, false);
  }

  function fukuro(ctx) {
    // top
    ctx.beginPath();
    ctx.moveTo(0, 10);
    for (var i = 0; i < 42; i++) {
      ctx.lineTo(10 * i + 5, 0);
      ctx.lineTo(10 * (i + 1), 10);
    }
    ctx.lineTo(420, 15);
    ctx.lineTo(0, 15);
    ctx.closePath();
    ctx.fillStyle = green;
    ctx.fill();
    ctx.fillStyle = gold;
    ctx.fillRect(0, 17, 420, 5);
    ctx.fillStyle = green;
    ctx.fillRect(0, 24, 420, 5);
    // bottom
    ctx.beginPath();
    ctx.moveTo(0, 590);
    for (var i = 0; i < 42; i++) {
      ctx.lineTo(10 * i + 5, 600);
      ctx.lineTo(10 * (i + 1), 590);
    }
    ctx.lineTo(420, 585);
    ctx.lineTo(0, 585);
    ctx.closePath();
    ctx.fillStyle = green;
    ctx.fill();
    ctx.fillStyle = gold;
    ctx.fillRect(0, 578, 420, 5);
    ctx.fillStyle = green;
    ctx.fillRect(0, 571, 420, 5);
    // center rect
    var left_x = 20;
    var right_x = 400;
    var top_y = 140;
    var bottom_y = 320;
    var border_radius = 15;
    var line_width = 5;
    ctx.lineWidth = 5;
    // center rect back
    ctx.fillStyle = 'rgba(255,255,255,0.7)';
    ctx.fillRect(left_x, top_y + border_radius, right_x - line_width - border_radius, bottom_y);
    // top of center rect
    ctx.beginPath();
    ctx.moveTo(left_x, top_y + border_radius * 2);
    ctx.lineTo(left_x, top_y + border_radius);
    ctx.quadraticCurveTo(left_x, top_y, left_x + border_radius, top_y);
    ctx.lineTo(right_x - border_radius, top_y);
    ctx.quadraticCurveTo(right_x, top_y, right_x, top_y + border_radius);
    ctx.lineTo(right_x, top_y + border_radius * 2);
    ctx.closePath();
    ctx.fillStyle = green;
    ctx.fill();
    // bottom of center rect
    ctx.beginPath();
    ctx.moveTo(left_x, bottom_y - border_radius * 2);
    ctx.lineTo(left_x, bottom_y - border_radius);
    ctx.quadraticCurveTo(left_x, bottom_y, left_x + border_radius, bottom_y);
    ctx.lineTo(right_x - border_radius, bottom_y);
    ctx.quadraticCurveTo(right_x, bottom_y, right_x, bottom_y - border_radius);
    ctx.lineTo(right_x, bottom_y - border_radius * 2);
    ctx.closePath();
    ctx.fillStyle = green;
    ctx.fill();
    // side of  center rect
    ctx.fillStyle = green;
    ctx.fillRect(left_x, top_y + border_radius * 2, 5, (bottom_y - top_y - border_radius * 4));
    ctx.fillRect(right_x - 5, top_y + border_radius * 2, 5, (bottom_y - top_y - border_radius * 4));
    // bottom rect
    left_x = 20;
    right_x = 400;
    top_y = 390;
    bottom_y = 540;
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(left_x, top_y + border_radius);
    ctx.quadraticCurveTo(left_x, top_y, left_x + border_radius, top_y);
    ctx.lineTo(right_x - border_radius, top_y);
    ctx.quadraticCurveTo(right_x, top_y, right_x, top_y + border_radius);
    ctx.lineTo(right_x, bottom_y - border_radius);
    ctx.quadraticCurveTo(right_x, bottom_y, right_x - border_radius, bottom_y);
    ctx.lineTo(left_x + border_radius, bottom_y);
    ctx.quadraticCurveTo(left_x, bottom_y, left_x, bottom_y - border_radius);
    ctx.closePath();
    ctx.strokeStyle = black;
    ctx.stroke();
    // right circle
    pathEllipse(240, 310, 400, 390);
    ctx.fillStyle = yellow;
    ctx.fill();
  }

  var title_font = "bold 93px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
  var title_sub_font = "20px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
  function titles(ctx, top, main, bottom) {
    top = top.split('').join(' ');
    bottom = bottom.split('').join(' ');
    // main
    ctx.font = title_font;
    ctx.strokeStyle = green;
    ctx.fillStyle = green;
    xScaleTextAlign(main, 29, 391, 270, 0, 1.5, true, true);
    // top & bottom
    ctx.font = title_sub_font;
    ctx.fillStyle = white;
    xScaleTextAlign(top, 40, 380, 163, 0, 1, true, false);
    xScaleTextAlign(bottom, 40, 380, 313, 0, 1, true, false);
  }

  var circled_font = "'Hiragino Mincho Pro','MS Mincho','TakaoMincho'";
  function circledText(ctx, text1, text2) {
    ctx.save();
    ctx.rotate(Math.PI / -16);
    ctx.lineWidth = 1;
    ctx.strokeStyle = red;
    ctx.fillStyle = red;
    // text1
    ctx.font = 'bold 28px ' + circled_font;
    xScaleTextAlign(text1, 180, 295, 403, 0, 1.5, true, true);
    // text2
    ctx.font = 'bold 26px ' + circled_font;
    xScaleTextAlign(text2, 210, 315, 431, 0, 1.5, true, false);
    ctx.restore();
  }

  var big1_font = "bold italic 80px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
  var sub_font = "bold italic 30px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
  function sub(ctx, text1, text2) {
    var big1 = text1.substring(0, 1);
    var text1 = text1.substring(1, text1.length);
    // compute scale
    ctx.font = big1_font;
    var big1_w = ctx.measureText(big1).width;
    ctx.font = sub_font;
    var text1_w = ctx.measureText(text1).width;
    var text2_w = ctx.measureText(text2).width;
    var width = big1_w + text1_w + text2_w;
    var scale = 230 / width;
    // big1
    ctx.font = big1_font;
    ctx.lineWidth = 5;
    ctx.strokeStyle = yellow;
    ctx.fillStyle = red;
    xScaleText(big1, 10, 380, scale, true, true);
    // text1
    ctx.font = sub_font;
    xScaleText(text1, 10 + big1_w, 375, scale, true, true);
    // text2
    ctx.fillStyle = green;
    xScaleText(text2, 12 + big1_w + text1_w, 375, scale, true, true);
  }

  var notice_title_font = "bold 26px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
  var notice_text12_font = "bold 22px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
  var notice_text34_font = "16px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
  function notice(ctx, title, text1, text2, text3, text4) {
    // title
    ctx.fillStyle = red;
    ctx.font = notice_title_font;
    xScaleTextAlign(title, 30, 390, 420, 0, 1, true, false);
    // text1, text2
    ctx.font = notice_text12_font;
    ctx.fillStyle = black;
    xScaleTextAlign(text1, 30, 390, 450, 0, 1, true, false, 'left');
    xScaleTextAlign(text2, 30, 390, 475, 0, 1, true, false, 'right');
    // text3, text4
    ctx.font = notice_text34_font;
    xScaleTextAlign(text3, 30, 390, 500, 0, 1, true, false, 'left');
    xScaleTextAlign(text4, 30, 390, 520, 0, 1, true, false, 'left');
  }

  function redraw() {
    ctx.clearRect(0, 0, 420, 640);
    // background
    var semecolor = document.querySelector('#color_seme').value;
    var ukecolor = document.querySelector('#color_uke').value;
    var name_s1 = document.querySelector('#name_seme').value;
    var name_u1 = document.querySelector('#name_uke').value;
    var name_s2 = document.querySelector('#name_seme2').value;
    var name_u2 = document.querySelector('#name_uke2').value;
    background(ctx, semecolor, ukecolor, name_s1, name_u1, name_s2, name_u2);
    // base
    fukuro(ctx);
    // text
    var title_top = document.querySelector('#title_top').value;
    var title_main = document.querySelector('#title_main').value;
    var title_bottom = document.querySelector('#title_bottom').value;
    titles(ctx, title_top, title_main, title_bottom);
    // circled
    var circled_text1 = document.querySelector('#circled_text1').value;
    var circled_text2 = document.querySelector('#circled_text2').value;
    circledText(ctx, circled_text1, circled_text2);
    // sub
    var sub_text1 = document.querySelector('#sub_text1').value;
    var sub_text2 = document.querySelector('#sub_text2').value;
    sub(ctx, sub_text1, sub_text2);
    // notice
    var notice_title = document.querySelector('#notice_title').value;
    var notice_text1 = document.querySelector('#notice_text1').value;
    var notice_text2 = document.querySelector('#notice_text2').value;
    var notice_text3 = document.querySelector('#notice_text3').value;
    var notice_text4 = document.querySelector('#notice_text4').value;
    notice(ctx, notice_title, notice_text1, notice_text2, notice_text3, notice_text4);
  }

  var ua = navigator.userAgent.toLowerCase();
  var isIE = (ua.indexOf('msie') > -1) || (ua.indexOf('trident/7') > -1);
  var ctx;
  function initialize() {
    // set events
    var inputs = document.querySelectorAll('.f_inputs');
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].previous_value = inputs[i].value;
      if (!isIE && inputs[i].type == 'color') {
        inputs[i].addEventListener('change', function(e){
          if (this.previous_value == this.value) return;
          redraw();
          this.previous_value = this.value;
        });
      } else {
        inputs[i].addEventListener('keydown', function(e){
          this.previous_value = this.value;
        });
        inputs[i].addEventListener('keyup', function(e){
          if (this.previous_value == this.value) return;
          redraw();
        });
      }
    }
    ctx = document.getElementById('maincanvas').getContext('2d');
    // Trick from http://stackoverflow.com/questions/2635814/
    var image = new Image;
    image.src = 'https://fonts.googleapis.com/css?family=Allura';
    image.onerror = redraw;
  }
  document.addEventListener('DOMContentLoaded', initialize);
})();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>腐葉土</title>
	<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>
	<style>
	.AlluraFont { font-family: 'Allura'; }
	table, td, th {
	border-collapse: collapse;
	border:1px solid #333;
	}
	</style>
	</head>
	<body>
	<table>
	<tbody>
	<tr>
	<th>タイトル（上）</th>
	<td><input class="f_inputs" type="text" id="title_top" name="title_top" value="ふようどっぽい" /></td>
	</tr>
	<tr>
	<th>タイトル</th>
	<td><input class="f_inputs" type="text" id="title_main" name="title_main" value="腐葉土本" /></td>
	</tr>
	<tr>
	<th>タイトル（下）</th>
	<td><input class="f_inputs" type="text" id="title_bottom" name="title_bottom" value="デザイン" /></td>
	</tr>
	</tbody>
	</table>
	<table>
	<thead>
	<tr><th></th><th>攻め</th><th>受け</th></tr>
	</thead>
	<tbody>
	<tr>
	<th>カラー</th>
	<td><input class="f_inputs" type="color" id="color_seme" name="color_seme" value="#A541F0" /></td>
	<td><input class="f_inputs" type="color" id="color_uke" name="color_uke" value="#55AAFF" /></td>
	</tr>
	<tr>
	<th>名前</th>
	<td><input class="f_inputs" type="text" id="name_seme" name="name_seme" value="攻めくん" /></td>
	<td><input class="f_inputs" type="text" id="name_uke" name="name_uke" value="受けちゃん" /></td>
	</tr>
	<tr>
	<th>名前（背景）</th>
	<td><input class="f_inputs" type="text" id="name_seme2" name="name_seme2" value="Semekun" /></td>
	<td><input class="f_inputs" type="text" id="name_uke2" name="name_uke2" value="Ukechan" /></td>
	</tr>
	</tbody>
	</table>
	<table>
	<tbody>
	<tr>
	<th>タイトル下</th>
	<td><input class="f_inputs" type="text" id="sub_text1" name="sub_text1" value="3種の" /></td>
	<td><input class="f_inputs" type="text" id="sub_text2" name="sub_text2" value="ミックス" /></td>
	</tr>
	<tr>
	<th>右の楕円</th>
	<td><input class="f_inputs" type="text" id="circled_text1" name="circled_text1" value="ぷるるん" /></td>
	<td><input class="f_inputs" type="text" id="circled_text2" name="circled_text2" value="新食感！" /></td>
	</tr>
	<tr>
	<th rowspan="3">注意事項</th>
	<td colspan="2"><input class="f_inputs" type="text" id="notice_title" name="notice_title" value="～お願い～" /></td>
	</tr>
	<tr>
	<td><input class="f_inputs" type="text" id="notice_text1" name="notice_text1" value="小さなお子様や中高生の方は" /></td>
	<td><input class="f_inputs" type="text" id="notice_text2" name="notice_text2" value="絶対に読まないでください。" /></td>
	</tr>
	<tr>
	<td><input class="f_inputs" type="text" id="notice_text3" name="notice_text3" value="本製品は男性同士の性描写を含み、耐性のない方や" /></td>
	<td><input class="f_inputs" type="text" id="notice_text4" name="notice_text4" value="18歳未満の方の購入はご遠慮いただいております。" /></td>
	</tr>
	</tbody>
	</table>
	<canvas id="maincanvas" width="420" height="600"></canvas>
	<div class="AlluraFont">.</div>
	<script>
	(function(){
	var green = 'rgb(15,80,10)';
	var yellow = 'rgb(242,242,12)';
	var red = 'rgb(200,40,40)';
	var gold = 'rgb(175,155,95)';
	var white = 'rgb(255,255,255)';
	var black = 'rgb(0,0,0)';

	function xScaleText(text, x, y, scale, fill, stroke) {
	ctx.save();
	ctx.scale(scale, 1);
	if (stroke)
	ctx.strokeText(text, x, y);
	if (fill)
	ctx.fillText(text, x, y);
	ctx.restore();
	}

	function xScaleTextAlign(text, x1, x2, y, padding, max_scale, fill, stroke, align) {
	if (typeof align != 'string') align = 'center';
	align = align.toLowerCase();
	var width = x2 - x1;
	var w = ctx.measureText(text).width;
	var scale = width / w;
	if (max_scale > 0 && scale > max_scale) {
	scale = max_scale;
	switch (align) {
	case 'left':
	break;
	case 'right':
	padding += (width - w * scale) / scale;
	break;
	default:
	padding += (width - w * scale) / 2 / scale;
	}
	}
	xScaleText(text, x1 / scale + padding, y, scale, fill, stroke);
	}

	function pathEllipse(x1, y1, x2, y2) {
	var xr = (x2 - x1) / 2; var yr = (y2 - y1) / 2;
	var cx = (Math.sqrt(2.0) - 1.0) * xr * 4 / 3;
	var cy = (Math.sqrt(2.0) - 1.0) * yr * 4 / 3;
	ctx.beginPath();
	ctx.moveTo(x1, y1 + yr);
	ctx.bezierCurveTo(x1, y1 + yr - cy, x1 + xr - cx, y1, x1 + xr, y1);
	ctx.bezierCurveTo(x1 + xr + cx, y1, x2, y1 + yr - cy, x2, y1 + yr);
	ctx.bezierCurveTo(x2, y1 + yr + cy, x1 + xr + cx, y2, x1 + xr, y2);
	ctx.bezierCurveTo(x1 + xr - cx, y2, x1, y1 + yr + cy, x1, y1 + yr);
	}

	var background_font_color = 'rgba(255,255,255,0.8)';
	var background_font = "bold italic 56px 'Allura'";
	var background_circle_font_color = white;
	var background_circle_font = "30px 'Lucida Grande','segoe UI','Hiragino Maru Gothic ProN',Meiryo,Arial,sans-serif";
	function background(ctx, color1, color2, name_s1, name_u1, name_s2, name_u2) {
	// left back
	var grad1 = ctx.createLinearGradient(0, 0, 0, 380);
	grad1.addColorStop(0, color1);
	grad1.addColorStop(1, white);
	ctx.fillStyle = grad1;
	ctx.fillRect(0, 25, 210, 275);
	// left name
	ctx.fillStyle = background_font_color;
	ctx.font = background_font;
	xScaleTextAlign(name_s2, 10, 200, 70, -3, 1.5, true, false);
	// right back
	var grad2 = ctx.createLinearGradient(0, 0, 0, 380);
	grad2.addColorStop(0, color2);
	grad2.addColorStop(1, white);
	ctx.fillStyle = grad2;
	ctx.fillRect(210, 25, 210, 275);
	// left name
	ctx.fillStyle = background_font_color;
	ctx.font = background_font;
	xScaleTextAlign(name_u2, 220, 410, 70, -3, 1.5, true, false);
	// left circle
	pathEllipse(40, 67, 180, 137);
	ctx.fillStyle = yellow;
	ctx.fill();
	pathEllipse(43, 70, 177, 134);
	ctx.fillStyle = color1;
	ctx.fill();
	// name on left circle
	ctx.fillStyle = background_circle_font_color;
	ctx.font = background_circle_font;
	xScaleTextAlign(name_s1, 50, 170, 113, 0, 1.5, true, false);
	// right circle
	pathEllipse(250, 67, 390, 137);
	ctx.fillStyle = yellow;
	ctx.fill();
	pathEllipse(253, 70, 387, 134);
	ctx.fillStyle = color2;
	ctx.fill();
	// name on left circle
	ctx.fillStyle = background_circle_font_color;
	ctx.font = background_circle_font;
	xScaleTextAlign(name_u1, 260, 380, 113, 0, 1.5, true, false);
	}

	function fukuro(ctx) {
	// top
	ctx.beginPath();
	ctx.moveTo(0, 10);
	for (var i = 0; i < 42; i++) {
	ctx.lineTo(10 * i + 5, 0);
	ctx.lineTo(10 * (i + 1), 10);
	}
	ctx.lineTo(420, 15);
	ctx.lineTo(0, 15);
	ctx.closePath();
	ctx.fillStyle = green;
	ctx.fill();
	ctx.fillStyle = gold;
	ctx.fillRect(0, 17, 420, 5);
	ctx.fillStyle = green;
	ctx.fillRect(0, 24, 420, 5);
	// bottom
	ctx.beginPath();
	ctx.moveTo(0, 590);
	for (var i = 0; i < 42; i++) {
	ctx.lineTo(10 * i + 5, 600);
	ctx.lineTo(10 * (i + 1), 590);
	}
	ctx.lineTo(420, 585);
	ctx.lineTo(0, 585);
	ctx.closePath();
	ctx.fillStyle = green;
	ctx.fill();
	ctx.fillStyle = gold;
	ctx.fillRect(0, 578, 420, 5);
	ctx.fillStyle = green;
	ctx.fillRect(0, 571, 420, 5);
	// center rect
	var left_x = 20;
	var right_x = 400;
	var top_y = 140;
	var bottom_y = 320;
	var border_radius = 15;
	var line_width = 5;
	ctx.lineWidth = 5;
	// center rect back
	ctx.fillStyle = 'rgba(255,255,255,0.7)';
	ctx.fillRect(left_x, top_y + border_radius, right_x - line_width - border_radius, bottom_y);
	// top of center rect
	ctx.beginPath();
	ctx.moveTo(left_x, top_y + border_radius * 2);
	ctx.lineTo(left_x, top_y + border_radius);
	ctx.quadraticCurveTo(left_x, top_y, left_x + border_radius, top_y);
	ctx.lineTo(right_x - border_radius, top_y);
	ctx.quadraticCurveTo(right_x, top_y, right_x, top_y + border_radius);
	ctx.lineTo(right_x, top_y + border_radius * 2);
	ctx.closePath();
	ctx.fillStyle = green;
	ctx.fill();
	// bottom of center rect
	ctx.beginPath();
	ctx.moveTo(left_x, bottom_y - border_radius * 2);
	ctx.lineTo(left_x, bottom_y - border_radius);
	ctx.quadraticCurveTo(left_x, bottom_y, left_x + border_radius, bottom_y);
	ctx.lineTo(right_x - border_radius, bottom_y);
	ctx.quadraticCurveTo(right_x, bottom_y, right_x, bottom_y - border_radius);
	ctx.lineTo(right_x, bottom_y - border_radius * 2);
	ctx.closePath();
	ctx.fillStyle = green;
	ctx.fill();
	// side of center rect
	ctx.fillStyle = green;
	ctx.fillRect(left_x, top_y + border_radius * 2, 5, (bottom_y - top_y - border_radius * 4));
	ctx.fillRect(right_x - 5, top_y + border_radius * 2, 5, (bottom_y - top_y - border_radius * 4));
	// bottom rect
	left_x = 20;
	right_x = 400;
	top_y = 390;
	bottom_y = 540;
	ctx.lineWidth = 2;
	ctx.beginPath();
	ctx.moveTo(left_x, top_y + border_radius);
	ctx.quadraticCurveTo(left_x, top_y, left_x + border_radius, top_y);
	ctx.lineTo(right_x - border_radius, top_y);
	ctx.quadraticCurveTo(right_x, top_y, right_x, top_y + border_radius);
	ctx.lineTo(right_x, bottom_y - border_radius);
	ctx.quadraticCurveTo(right_x, bottom_y, right_x - border_radius, bottom_y);
	ctx.lineTo(left_x + border_radius, bottom_y);
	ctx.quadraticCurveTo(left_x, bottom_y, left_x, bottom_y - border_radius);
	ctx.closePath();
	ctx.strokeStyle = black;
	ctx.stroke();
	// right circle
	pathEllipse(240, 310, 400, 390);
	ctx.fillStyle = yellow;
	ctx.fill();
	}

	var title_font = "bold 93px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
	var title_sub_font = "20px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
	function titles(ctx, top, main, bottom) {
	top = top.split('').join(' ');
	bottom = bottom.split('').join(' ');
	// main
	ctx.font = title_font;
	ctx.strokeStyle = green;
	ctx.fillStyle = green;
	xScaleTextAlign(main, 29, 391, 270, 0, 1.5, true, true);
	// top & bottom
	ctx.font = title_sub_font;
	ctx.fillStyle = white;
	xScaleTextAlign(top, 40, 380, 163, 0, 1, true, false);
	xScaleTextAlign(bottom, 40, 380, 313, 0, 1, true, false);
	}

	var circled_font = "'Hiragino Mincho Pro','MS Mincho','TakaoMincho'";
	function circledText(ctx, text1, text2) {
	ctx.save();
	ctx.rotate(Math.PI / -16);
	ctx.lineWidth = 1;
	ctx.strokeStyle = red;
	ctx.fillStyle = red;
	// text1
	ctx.font = 'bold 28px ' + circled_font;
	xScaleTextAlign(text1, 180, 295, 403, 0, 1.5, true, true);
	// text2
	ctx.font = 'bold 26px ' + circled_font;
	xScaleTextAlign(text2, 210, 315, 431, 0, 1.5, true, false);
	ctx.restore();
	}

	var big1_font = "bold italic 80px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
	var sub_font = "bold italic 30px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
	function sub(ctx, text1, text2) {
	var big1 = text1.substring(0, 1);
	var text1 = text1.substring(1, text1.length);
	// compute scale
	ctx.font = big1_font;
	var big1_w = ctx.measureText(big1).width;
	ctx.font = sub_font;
	var text1_w = ctx.measureText(text1).width;
	var text2_w = ctx.measureText(text2).width;
	var width = big1_w + text1_w + text2_w;
	var scale = 230 / width;
	// big1
	ctx.font = big1_font;
	ctx.lineWidth = 5;
	ctx.strokeStyle = yellow;
	ctx.fillStyle = red;
	xScaleText(big1, 10, 380, scale, true, true);
	// text1
	ctx.font = sub_font;
	xScaleText(text1, 10 + big1_w, 375, scale, true, true);
	// text2
	ctx.fillStyle = green;
	xScaleText(text2, 12 + big1_w + text1_w, 375, scale, true, true);
	}

	var notice_title_font = "bold 26px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
	var notice_text12_font = "bold 22px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
	var notice_text34_font = "16px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
	function notice(ctx, title, text1, text2, text3, text4) {
	// title
	ctx.fillStyle = red;
	ctx.font = notice_title_font;
	xScaleTextAlign(title, 30, 390, 420, 0, 1, true, false);
	// text1, text2
	ctx.font = notice_text12_font;
	ctx.fillStyle = black;
	xScaleTextAlign(text1, 30, 390, 450, 0, 1, true, false, 'left');
	xScaleTextAlign(text2, 30, 390, 475, 0, 1, true, false, 'right');
	// text3, text4
	ctx.font = notice_text34_font;
	xScaleTextAlign(text3, 30, 390, 500, 0, 1, true, false, 'left');
	xScaleTextAlign(text4, 30, 390, 520, 0, 1, true, false, 'left');
	}

	function redraw() {
	ctx.clearRect(0, 0, 420, 640);
	// background
	var semecolor = document.querySelector('#color_seme').value;
	var ukecolor = document.querySelector('#color_uke').value;
	var name_s1 = document.querySelector('#name_seme').value;
	var name_u1 = document.querySelector('#name_uke').value;
	var name_s2 = document.querySelector('#name_seme2').value;
	var name_u2 = document.querySelector('#name_uke2').value;
	background(ctx, semecolor, ukecolor, name_s1, name_u1, name_s2, name_u2);
	// base
	fukuro(ctx);
	// text
	var title_top = document.querySelector('#title_top').value;
	var title_main = document.querySelector('#title_main').value;
	var title_bottom = document.querySelector('#title_bottom').value;
	titles(ctx, title_top, title_main, title_bottom);
	// circled
	var circled_text1 = document.querySelector('#circled_text1').value;
	var circled_text2 = document.querySelector('#circled_text2').value;
	circledText(ctx, circled_text1, circled_text2);
	// sub
	var sub_text1 = document.querySelector('#sub_text1').value;
	var sub_text2 = document.querySelector('#sub_text2').value;
	sub(ctx, sub_text1, sub_text2);
	// notice
	var notice_title = document.querySelector('#notice_title').value;
	var notice_text1 = document.querySelector('#notice_text1').value;
	var notice_text2 = document.querySelector('#notice_text2').value;
	var notice_text3 = document.querySelector('#notice_text3').value;
	var notice_text4 = document.querySelector('#notice_text4').value;
	notice(ctx, notice_title, notice_text1, notice_text2, notice_text3, notice_text4);
	}

	var ua = navigator.userAgent.toLowerCase();
	var isIE = (ua.indexOf('msie') > -1) \|\| (ua.indexOf('trident/7') > -1);
	var ctx;
	function initialize() {
	// set events
	var inputs = document.querySelectorAll('.f_inputs');
	for (var i = 0; i < inputs.length; i++) {
	inputs[i].previous_value = inputs[i].value;
	if (!isIE && inputs[i].type == 'color') {
	inputs[i].addEventListener('change', function(e){
	if (this.previous_value == this.value) return;
	redraw();
	this.previous_value = this.value;
	});
	} else {
	inputs[i].addEventListener('keydown', function(e){
	this.previous_value = this.value;
	});
	inputs[i].addEventListener('keyup', function(e){
	if (this.previous_value == this.value) return;
	redraw();
	});
	}
	}
	ctx = document.getElementById('maincanvas').getContext('2d');
	// Trick from http://stackoverflow.com/questions/2635814/
	var image = new Image;
	image.src = 'https://fonts.googleapis.com/css?family=Allura';
	image.onerror = redraw;
	}
	document.addEventListener('DOMContentLoaded', initialize);
	})();
	</script>
	</body>
	</html>