sample: draw lines on canvas with checkboxes

by sii_side

HTML

<canvas id="c" width="200" height="200"></canvas>

<p>
  <label><input type="checkbox" name="a">A</label>
  <label><input type="checkbox" name="b">B</label>
  <label><input type="checkbox" name="c">C</label>
  <input type="button" value="draw" onclick="drawLine();">
</p>

JavaScript

function drawLine() {
	var lineObj = {
  	"a": {
    	start: [50, 50],
      end: [100, 100]
    },
    "b": {
    	start: [25, 70],
      end: [60, 85]
    },
    "c": {
    	start: [80, 150],
      end: [70, 200]
    }
  }

  var c = document.querySelector("#c");
  var ctx = c.getContext("2d");

	//一度全てclear
  ctx.clearRect(0, 0, c.width, c.height);
  
  //checkされたcheckboxを調べ、再描画
  var cbox = document.querySelectorAll("[type=checkbox]");
  for(var i = 0; i < cbox.length; i++) {
  	if(cbox[i].checked) {
    	ctx.beginPath();
      ctx.moveTo(lineObj[cbox[i].name].start[0], lineObj[cbox[i].name].start[1]);
      ctx.lineTo(lineObj[cbox[i].name].end[0], lineObj[cbox[i].name].end[1]);
      ctx.stroke();
      ctx.closePath();
    }
  }
}