// A simple sketch editor.
// Select whole workspace, and press [do it]

workspace.rows = 12;
canvas = document.createElement("canvas");
workspace.parentNode.insertBefore(canvas, workspace);
canvas.width = "600"
canvas.height= "300"
canvas.style.border = "4px solid #99cccc"

ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineCap = "round";

// You can change the color or width of the pen to modify following expression.
ctx.strokeStyle = "rgba(255, 128, 64, 0.1)";
ctx.lineWidth = 8;

canvas.onmousedown = function (e) {
  this.pendown = true
}
canvas.onmouseup = function (e) {
  ctx.beginPath();
  this.pendown = false
}
canvas.onmousemove = function (e) {
  if (this.pendown) {
    ctx.lineTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
    ctx.stroke();
  } else {
    ctx.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
  }
}