katoy/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Canvas でお絵描き</title>
    <style>
      #mycanvas {
        border: 3px solid #999;
        cursor: crosshair;
      }
      .thmbnail {
        border: 1px solid #999;
        margin-right: 4px;
      }
    </style>
  </head>
<body>
  <p>
    <select id = "penColor">
      <option value="black">黒</option>
      <option value="red">赤</option>
      <option value="blue">青</option>
      <option value="white">白</option>
    </select>
    <select id = "penWidth">
      <option value="1">1</option>
      <option value="3">3</option>
      <option value="5">5</option>
      <option value="10">10</option>
    </select>
    <input id="clear" type="button" value="Clear"></input>
    <input id="save" type="button" value="Add Gallery"></input>
  </p>
  <canvas id="mycanvas" width="400" height="200">
    canvas に対応したブラウザでアクセスしてください。
  </canvas>
  <div id="gallery"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src='myscript.js'></script>
</body>
</thml>

## myscript.coffee
$ ->
  canvas = document.getElementById("mycanvas")
  return false if not canvas or not canvas.getContext

  clear = -> ctx.clearRect 0, 0, canvas.width, canvas.height
  startX = undefined
  startY = undefined
  drawing = undefined

  ctx = canvas.getContext("2d")
  drawing = false
  boaderWidth = 3
  $("#mycanvas").mousedown((e) ->
    drawing = true
    startX = e.pageX - $(this).offset().left - boaderWidth
    startY = e.pageY - $(this).offset().top - boaderWidth
  ).mousemove((e) ->
    return  unless drawing
    x = e.pageX - $(this).offset().left - boaderWidth
    y = e.pageY - $(this).offset().top - boaderWidth
    ctx.beginPath()
    ctx.moveTo startX, startY
    ctx.lineTo x, y
    ctx.stroke()
    startX = x
    startY = y
  ).mouseup((e) ->
    drawing = false
  ).mouseleave (e) ->
    drawing = false

  $("#penColor").change -> ctx.strokeStyle = $(this).val()

  $("#penWidth").change -> ctx.lineWidth = $(this).val()

  $("#clear").click ->
    return  unless confirm("本当に消去しますか？")
    clear()

  $("#save").click ->
    img = $("<img></img>").attr(
      width: 100
      height: 50
      src: canvas.toDataURL()
    )
    link = $("<a></a>").attr(
      href: canvas.toDataURL().replace("image/png", "application/octat-stream")
      download: new Date().getTime() + ".png"
    )
    $("#gallery").append link.append(img.addClass("thmbnail"))
    clear()
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>Canvas でお絵描き</title>
	<style>
	#mycanvas {
	border: 3px solid #999;
	cursor: crosshair;
	}
	.thmbnail {
	border: 1px solid #999;
	margin-right: 4px;
	}
	</style>
	</head>
	<body>
	<p>
	<select id = "penColor">
	<option value="black">黒</option>
	<option value="red">赤</option>
	<option value="blue">青</option>
	<option value="white">白</option>
	</select>
	<select id = "penWidth">
	<option value="1">1</option>
	<option value="3">3</option>
	<option value="5">5</option>
	<option value="10">10</option>
	</select>
	<input id="clear" type="button" value="Clear"></input>
	<input id="save" type="button" value="Add Gallery"></input>
	</p>
	<canvas id="mycanvas" width="400" height="200">
	canvas に対応したブラウザでアクセスしてください。
	</canvas>
	<div id="gallery"></div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src='myscript.js'></script>
	</body>
	</thml>
	$ ->
	canvas = document.getElementById("mycanvas")
	return false if not canvas or not canvas.getContext

	clear = -> ctx.clearRect 0, 0, canvas.width, canvas.height
	startX = undefined
	startY = undefined
	drawing = undefined

	ctx = canvas.getContext("2d")
	drawing = false
	boaderWidth = 3
	$("#mycanvas").mousedown((e) ->
	drawing = true
	startX = e.pageX - $(this).offset().left - boaderWidth
	startY = e.pageY - $(this).offset().top - boaderWidth
	).mousemove((e) ->
	return unless drawing
	x = e.pageX - $(this).offset().left - boaderWidth
	y = e.pageY - $(this).offset().top - boaderWidth
	ctx.beginPath()
	ctx.moveTo startX, startY
	ctx.lineTo x, y
	ctx.stroke()
	startX = x
	startY = y
	).mouseup((e) ->
	drawing = false
	).mouseleave (e) ->
	drawing = false

	$("#penColor").change -> ctx.strokeStyle = $(this).val()

	$("#penWidth").change -> ctx.lineWidth = $(this).val()

	$("#clear").click ->
	return unless confirm("本当に消去しますか？")
	clear()

	$("#save").click ->
	img = $("<img></img>").attr(
	width: 100
	height: 50
	src: canvas.toDataURL()
	)
	link = $("<a></a>").attr(
	href: canvas.toDataURL().replace("image/png", "application/octat-stream")
	download: new Date().getTime() + ".png"
	)
	$("#gallery").append link.append(img.addClass("thmbnail"))
	clear()