Using HTML5 and JavaScript Extend Bresenham\'s line-drawing algorithm to work fo
ID: 3589697 • Letter: U
Question
Using HTML5 and JavaScript
Extend Bresenham's line-drawing algorithm to work for all slopes using symmetry. The user left clicks to select the start of a line segment and releases the button to select the endpoint. Your code should continuously display the line while the left button is held down.
Here is the code to extend:
<!doctype html>
<head></head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.addEventListener("mousedown", handleMouseDown);
canvas.addEventListener("mousemove", handleMouseMove);
canvas.addEventListener("mouseup", handleMouseUp);
var p0 = {x: 0, y:0};
var p1 = {x: 0, y:0};
var isdown = 0;
display();
function handleMouseUp(event)
{
isdown = 0;
p1.x = event.clientX - canvas.offsetLeft;
p1.y = event.clientY - canvas.offsetTop;
display();
}
function handleMouseDown(event)
{
isdown = 1;
p0.x = event.clientX - canvas.offsetLeft;
p0.y = event.clientY - canvas.offsetTop;
display();
}
function handleMouseMove(event)
{
if (isdown == 0)
return;
p1.x = event.clientX - canvas.offsetLeft;
p1.y = event.clientY - canvas.offsetTop;
display();
}
function midpoint(p0, p1)
{
var dy = p1.y - p0.y;
var dx = p1.x - p0.x;
var incE = -2*dy;
var incNE = 2*dx + incE;
var d = dx - 2*dy;
var x, y;
y = p0.y;
for (x = p0.x; x <= p1.x; ++x)
{
context.fillRect(x, y, 1, 1);
if (d >= 0)
d += incE;
else
{
d += incNE;
++y;
}
}
}
function display()
{
context.clearRect(0, 0, canvas.width, canvas.height);
var dx = p1.x - p0.x;
var dy = p1.y - p0.y;
if (dx > 0 && dy > 0 && dx >= dy)
midpoint(p0, p1);
context.fillStyle = "#00FF00";
context.strokeStyle = "#FF0000";
// context.beginPath();
// context.moveTo(p0.x, p0.y);
// context.lineTo(p1.x, p1.y);
// context.stroke();
}
</script>
</body>
</html>
Explanation / Answer
Hi,
Congrats. You tried really well. You missed few important parts.
I corrected some logic flaws.
1. You didn't handle display properly.
2. You didn't keep track of previous x,y values. i.e p0 in your code.
You can see the code in action using URL = https://jsfiddle.net/y2z8q3eb/
Complete code:
<html>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.addEventListener("mousedown", handleMouseDown, false);
canvas.addEventListener("mousemove", handleMouseMove, false);
canvas.addEventListener("mouseup", handleMouseUp, false);
var p0 = {x: 0, y:0};
var p1 = {x: 0, y:0};
var isdown = 0;
draw = false;
display();
function handleMouseUp(event) {
isdown = 0;
}
function handleMouseDown(event) {
isdown = 1;
p0.x = p1.x;
p0.y = p1.y;
p1.x = event.clientX - canvas.offsetLeft;
p1.y = event.clientY - canvas.offsetTop;
draw = true;
if (draw) {
context.beginPath();
context.fillStyle = "00FF00";
context.fillRect(p1.x, p1.y, 2, 2);
context.closePath();
draw = false;
}
}
function handleMouseMove(event) {
if (isdown == 0) {
return;
}
p0.x = p1.x;
p0.y = p1.y;
p1.x = event.clientX - canvas.offsetLeft;
p1.y = event.clientY - canvas.offsetTop;
display();
}
function display()
{
//context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(p0.x, p0.y);
context.lineTo(p1.x, p1.y);
context.fillStyle = "#00FF00";
context.strokeStyle = "#FF0000";
context.stroke();
context.closePath();
/*var dx = p1.x - p0.x;
var dy = p1.y - p0.y;
if (dx > 0 && dy > 0 && dx >= dy)
midpoint(p0, p1);
context.fillStyle = "#00FF00";
context.strokeStyle = "#FF0000";*/
// context.beginPath();
// context.moveTo(p0.x, p0.y);
// context.lineTo(p1.x, p1.y);
// context.stroke();
}
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.