<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<script type="text/javascript" src="assets/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
var draw_canvas = document.getElementById("draw");
var ctx1 = draw_canvas.getContext("2d");
draw_canvas.addEventListener("mouseup",onMouseUp,false);
draw_canvas.addEventListener("mousedown",onMouseDown,false);
var line_x = new Array();
var line_y = new Array();
var index = 0;
function onMouseUp(event){
draw_canvas.removeEventListener("mousemove",onMouseMove);
//ctx1.beginPath();
ctx1.moveTo(line_x[0],line_y[0]);
for(var i = 1; i<line_x.length; i++){
ctx1.lineTo(line_x[i],line_y[i]);
}
ctx1.stroke();
ctx1.restore();
line_x = new Array();
line_y = new Array();
index = 0;
}
function onMouseMove(event){
line_x[index] = event.pageX-150;
line_y[index] = event.pageY;
index++;
if(index > 4){
//ctx1.beginPath();
ctx1.moveTo(line_x[0],line_y[0]);
for(var i = 1; i<line_x.length; i++){
ctx1.lineTo(line_x[i],line_y[i]);
}
ctx1.stroke();
ctx1.restore();
/*
index = 0; */
line_x = new Array();
line_y = new Array();
}
}
function onMouseDown(event){
draw_canvas.addEventListener("mousemove",onMouseMove,false);
ctx1.width = 50;
ctx1.fillStyle = "rgb(200,0,0)";
line_x[index] = event.pageX-150;
line_y[index] = event.pageY;
index++;
ctx1.moveTo(event.pageX-150,event.pageY);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
<canvas id="draw" width="500" height="500" style="border: 1px solid red;"></canvas>
</body>
</html>