With lots of help from internet I am now able to draw circles and arrow-headed lines on canvas by dragging the mouse on canvas. The problem now is I am not able to erase what I draw. I need an eraser tool for erasing a small portion of the drawings.
What I am doing to draw is I have created two canvases. I will draw on first canvas (temp canvas) and copy it to the second canvas (main canvas). This is the case for every new object that I draw on canvas.
temp canvas was overlapped on the main canvas. So I track the mouse events using temp canvas. And then I am using .clearRect() on main canvas.
Please tell me the mistake I am making here. Thanks in advance.
Here is my code (JS, CSS, HTML):
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var color = 'red';
var tool = 1;
var select = document.forms[0].disease;
select.onchange = function() {
var disease = select.options[select.selectedIndex].text;
if (disease == "Exudates") color = 'red';
else color = 'green';
context.strokeStyle = color;
};
var select2 = document.forms[0].tool;
select2.onchange = function() {
tool = select2.options[select2.selectedIndex].value;
context.lineWidth = tool;
};
function draw(mode) {
var tempcontext = tempcanvas.getContext('2d'),
w = canvas.width,
h = canvas.height,
x1,
y1,
isDown = false;
tempcanvas.onmousedown = function(e) {
var pos = getPosition(e, canvas);
x1 = pos.x;
y1 = pos.y;
isDown = true;
};
tempcanvas.onmouseup = function() {
isDown = false;
context.drawImage(tempcanvas, 0, 0);
tempcontext.clearRect(0, 0, w, h);
};
tempcanvas.onmousemove = function(e) {
if (!isDown) return;
var pos = getPosition(e, canvas);
x2 = pos.x;
y2 = pos.y;
tempcontext.clearRect(0, 0, w, h);
if (mode == "Circles") drawEllipse(x1, y1, x2, y2);
if (mode == "Lines") drawArrow(x1, y1, x2, y2);
};
function drawEllipse(x1, y1, x2, y2) {
var radiusX = (x2 - x1) * 0.5,
radiusY = (y2 - y1) * 0.5,
centerX = x1 + radiusX,
centerY = y1 + radiusY,
step = 0.01,
a = step,
pi2 = Math.PI * 2 - step;
tempcontext.beginPath();
tempcontext.moveTo(centerX + radiusX * Math.cos(0),
centerY + radiusY * Math.sin(0));
for (; a<pi2; a+=step) {
tempcontext.lineTo(centerX + radiusX * Math.cos(a),
centerY + radiusY * Math.sin(a));
}
//tempcontext.fillStyle=color;
tempcontext.font = "20px Georgia";
if (color == "red") tempcontext.fillText("Exudate", x2, y2);
else tempcontext.fillText("Red Lession", x2, y2);
tempcontext.closePath();
tempcontext.lineWidth = tool;
tempcontext.strokeStyle = color;
tempcontext.stroke();
};
function drawArrow(x1, y1, x2, y2) {
var headLength = 10,
step = 0.01,
a = step,
pi2 = Math.PI * 2 - step;
tempcontext.beginPath();
tempcontext.moveTo(x1, y1);
for (; a<pi2; a+=step) {
tempcontext.lineTo(x2, y2);
var degreesInRadians225 = 225 * Math.PI / 180;
var degreesInRadians135 = 135 * Math.PI / 180;
var dx = x2 - x1;
var dy = y2 - y1;
var angle = Math.atan2(dy, dx);
var x225 = x2 + headLength * Math.cos(angle + degreesInRadians225);
var y225 = y2 + headLength * Math.sin(angle + degreesInRadians225);
var x135 = x2 + headLength * Math.cos(angle + degreesInRadians135);
var y135 = y2 + headLength * Math.sin(angle + degreesInRadians135);
// draw partial arrowhead at 225 degrees
tempcontext.moveTo(x2, y2);
tempcontext.lineTo(x225, y225);
// draw partial arrowhead at 135 degrees
tempcontext.moveTo(x2, y2);
tempcontext.lineTo(x135, y135);
}
tempcontext.closePath();
tempcontext.lineWidth = tool;
tempcontext.strokeStyle = color;
tempcontext.stroke();
};
}
function erase() {
tempcanvas.onmousedown = function(e) {
var pos = getPosition(e, canvas);
mousedown = true;
context.beginPath();
context.moveTo(pos.x, pos.y);
};
tempcanvas.onmouseup = function(e) {
mousedown = false;
};
tempcanvas.onmousemove = function(e) {
if (!mousedown) return;
context.clearRect(pos.x, pos.y, 10, 10);
};
}
function getPosition(e, gCanvasElement) {
var x;
var y;
x = e.pageX;
y = e.pageY;
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
return {x:x, y:y};
}
function save() {
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');
var img = document.getElementById("result");
context2.drawImage(img, 0, 0, 300, 300);
context2.drawImage(canvas, 0, 0);
var canvasData = canvas2.toDataURL();
document.getElementById('canvasImg').src = canvasData;
};#myCanvas {
background: url("images/<s:property value="userImageFileName"/>");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#myCanvas,
#tempcanvas {
cursor: pointer;
border: 1px solid black;
position: absolute;
left: 0;
top: 0;
}
#myCanvas:active,
#tempcanvas:active {
cursor: crosshair;
}<html>
<head>
<title>Success: Upload User Image</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">Please use a modern browser like Firefox, Chrome, Safari</canvas>
<canvas id="tempcanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<form>
<select name='tool' onChange="split()">
<option value='2'>Pen</option>
<option value='5'>Sketch</option>
</select>
<select name='disease' onChange="split()">
<option>Exudates</option>
<option>Red Lessions</option>
</select>
</form>
<input type="button" value="eraser" onClick="erase()" />
<input type="button" value="circles" onclick="draw('Circles')" />
<input type="button" value="lines" onclick="draw('Lines')" />
<input type="submit" value="save" onClick="save()" />
</body>
</html>
