var can;
var context;
var drawFlag = false;
var oldX = 0;
var oldY = 0;
window.addEventListener("load", function(){
can = document.getElementById("myCanvas");
context = can.getContext("2d");
can.addEventListener("mousemove", draw, true);
can.addEventListener("mousedown", function(e){
drawFlag = true;
oldX = e.clientX;
oldY = e.clientY;
context.beginPath();
context.lineWidth = 50;
context.lineJoin = 'round';
context.strokeStyle = "rgba(255,0,0,255)";
context.moveTo(oldX, oldY);
}, false);
can.addEventListener("mouseup", function(){
drawFlag = false;
context.closePath();
}, false);
}, true);
// 描画処理
function draw(e){
if (!drawFlag) return;
var x = e.clientX;
var y = e.clientY;
context.lineTo(x, y);
context.stroke();
}
dmFyIGNhbjsKdmFyIGNvbnRleHQ7CnZhciBkcmF3RmxhZyA9IGZhbHNlOwp2YXIgb2xkWCA9IDA7CnZhciBvbGRZID0gMDsKd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoImxvYWQiLCBmdW5jdGlvbigpewoJY2FuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoIm15Q2FudmFzIik7Cgljb250ZXh0ID0gY2FuLmdldENvbnRleHQoIjJkIik7CgoJY2FuLmFkZEV2ZW50TGlzdGVuZXIoIm1vdXNlbW92ZSIsIGRyYXcsIHRydWUpOwoJY2FuLmFkZEV2ZW50TGlzdGVuZXIoIm1vdXNlZG93biIsIGZ1bmN0aW9uKGUpewoJCWRyYXdGbGFnID0gdHJ1ZTsKCQlvbGRYID0gZS5jbGllbnRYOwoJCW9sZFkgPSBlLmNsaWVudFk7CgkJY29udGV4dC5iZWdpblBhdGgoKTsKCQljb250ZXh0LmxpbmVXaWR0aCA9IDUwOwoJCWNvbnRleHQubGluZUpvaW4gPSAncm91bmQnOwoJCWNvbnRleHQuc3Ryb2tlU3R5bGUgPSAicmdiYSgyNTUsMCwwLDI1NSkiOwoJCWNvbnRleHQubW92ZVRvKG9sZFgsIG9sZFkpOwoJfSwgZmFsc2UpOwoJY2FuLmFkZEV2ZW50TGlzdGVuZXIoIm1vdXNldXAiLCBmdW5jdGlvbigpewoJCWRyYXdGbGFnID0gZmFsc2U7CgkJY29udGV4dC5jbG9zZVBhdGgoKTsKCX0sIGZhbHNlKTsKfSwgdHJ1ZSk7Ci8vIOaPj+eUu+WHpueQhgpmdW5jdGlvbiBkcmF3KGUpewoJaWYgKCFkcmF3RmxhZykgcmV0dXJuOwoJdmFyIHggPSBlLmNsaWVudFg7Cgl2YXIgeSA9IGUuY2xpZW50WTsKCWNvbnRleHQubGluZVRvKHgsIHkpOwoJY29udGV4dC5zdHJva2UoKTsKfQo=