<canvas id="mycanvas" style="border:3px solid #999" width="700" height="400"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function(){
var drawing = false;
mycanvas = document.getElementById("mycanvas");
cCtx = mycanvas.getContext('2d');
mycanvas.onmousedown = function(event) {
cCtx.beginPath();
cCtx.moveTo(event.pageX, event.pageY);
drawing = true;
};
mycanvas.onmousemove = function(event) {
if (!drawing) return;
cCtx.lineTo(event.pageX, event.pageY);
cCtx.stroke();
}
mycanvas.onmouseup = function(event) {
cCtx.closePath();
drawing = false;
};
}, false);
</script>
jQueryなし、プラグインなしでここまでシンプルできるって凄いな・・・・