キャンバスで遊び中 - 簡易お絵描き
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);