fablic drawing mode

fablic drawing mode

by akiyah

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.2.0/fabric.min.js"></script>
<button id="next">次へ</button>
<span id="message"></span><br/>
<button id="result" style="display: none;">結果発表</button><br/>
<div id="title_area" style="display: none;" >お題:<input type="text" id="title" /></div>
<div id="image_area"></div>
<div id="canvas_area" width="100%" style="display: none;">
  <canvas id="canvas" width="300" height="300"></canvas>
  <label style="color: black;"><input type="radio" name="color" value="black" id="color_black" checked>黒</label>
  <label style="color: red;"><input type="radio" name="color" value="black" id="color_red">赤</label>
  <label style="color: white; background-color: gray;"><input type="radio" name="color" value="black" id="color_white">白</label>
  <br/>
  <label style="font-weight: bold;"><input type="radio" name="weight" value="bold" id="weight_bold">太</label>
  <label style="font-weight: normal;"><input type="radio" name="weight" value="normal" id="weight_normal" checked>中</label>
  <label style="font-weight: lighter;"><input type="radio" name="weight" value="light" id="weight_light">細</label>
</div>

CSS

button {
  height: 30px;
}

canvas {
  border: 3px solid pink;
}
img {
  border: 3px solid gray;
}

JavaScript

var step = "step0";
var user = 1;
var canvas;

function onclickNextButton() {
  if (step == "step0") {
    document.getElementById("message").innerText = "お題を入力してください";
    document.getElementById("title_area").style.display = "";
    step = "step0-1";
    return;
  }
  if (step == "step0-1") {
    document.getElementById("message").innerText = "次の人に渡してください";
    document.getElementById("title").disabled = "true";
    document.getElementById("title_area").style.display = "none";
    step = "step1";
    return;
  }

  if (step == "step1") {
    document.getElementById("result").style.display = "none";
    if (user == 1) {
      document.getElementById("message").innerText = "お題を見てください";
      document.getElementById("title_area").style.display = "";      
    } else {
      document.getElementById("message").innerText = "前の人の絵を見てください";
      document.getElementById("image" + (user - 1)).style.display = "";
    }
    step = "step2";
    return;
  }
  if (step == "step2") {
    document.getElementById("message").innerText = "絵を書いてください。書き終わったら「次へ」を押してください。";
    if (user == 1) {
      document.getElementById("title_area").style.display = "none";
    } else {
      document.getElementById("image" + (user - 1)).style.display = "none";
    }
    document.getElementById("canvas_area").style.display = "";
    step = "step3";
    return;
  }
  if (step == "step3") {
    document.getElementById("message").innerText = "次の人に渡してください";
    document.getElementById("result").style.display = "";
    
    var image = document.createElement("img");
    image.id = "image" + user;
    image.src = canvas.toDataURL();
    //image.style.background = "gray";
    image.style.display = "none";
    document.getElementById("image_area").appendChild(image);
    user += 1;

    document.getElementById("canvas_area").style.display = "none";
    canvas.clear();
    
    resetRadioButtons();
    step = "step1";
    return;
  }
}

function onclickResultButton() {
 ...