キャンバスで遊び中 - 簡易お絵描き


http://www.fujidig.com/misc/js/canvas/oekaki.html
mousemoveイベントの発行タイミングとドラッグ - 素人がプログラミングを勉強していたブログの改造。
たしか一番最初にCanvasをいじったプログラム。この記事がCanvasを触るきっかけでした(前からいつか機会があったら触ろうとは思っていたけど)。

// original : http://d.hatena.ne.jp/javascripter/20080612/1213257468
var canvas = document.body.appendChild(document.createElement('canvas'));
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = 'absolute';
canvas.style.top = '0px';
canvas.style.left = '0px';

var context = canvas.getContext('2d');
var d_flag = null;
context.lineWidth = 10;
context.lineCap = 'round';

canvas.addEventListener('mousedown',
function(e) {
  d_flag = true;
  context.beginPath();
  context.moveTo(e.clientX, e.clientY);
},
false);
canvas.addEventListener('mouseup',
function(e) {
  d_flag = false;
  context.lineTo(e.clientX, e.clientY);
  context.stroke();
},
false);
canvas.addEventListener('mousemove',
function(e) {
  if (d_flag) {
  	context.lineTo(e.clientX, e.clientY);
  	context.stroke();
    context.beginPath();
    context.moveTo(e.clientX, e.clientY);
  }
},
false);