html5 canvas drawing board
//index.html
<html>
<head>
<meta charset=utf-8>
<title>HTML5</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css" />
</head>
<body>
<canvas id="picture">Your browser does not support it</canvas>
</body>
</html>
——————————————————————————————————————————
//index.css
#picture{
width:500px;
height:300px;
border:1px solid #333;
}
________________________________________________________________________
//index.js
$(function(){
var ctest=$('#picture').get(0);
var pic=ctest.getContext("2d");
ctest.width=500;
ctest.height=300;
pic.lineWidth=5;
pic.strokeStyle='rgba(255,0,0,0.5)';
var pn=false;
$('#picture').mousedown(function(e){
var mouseX=e.pageX-this.offsetLeft;
var mouseY=e.pageY-this.offsetTop;
pn=true;
pic.moveTo(mouseX,mouseY);
});
$(document).mouseup(function(e){
pn=false;
});
$('#picture').mousemove(function(e){
var mouseX=e.pageX-this.offsetLeft;
var mouseY=e.pageY-this.offsetTop;
if(pn){
pic.lineTo(mouseX,mouseY);
pic.stroke();
};
});
});