HTML5 Canvas element is used for making 2D graphics in browser. Canvas has several methods to draw 2D graphics path, boxes, line, circle, rectangle etc. One of these we are using here is line method.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
canvas{border: 2px solid #000;}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var clicks = 0;
var lastClick = [0, 0];
document.getElementById('canvas').addEventListener('click', drawLine, false);
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return [x, y];
}
function drawLine(e) {
context = this.getContext('2d');
x = getCursorPosition(e)[0] - this.offsetLeft;
y = getCursorPosition(e)[1] - this.offsetTop;
if (clicks != 1) {
clicks++;
} else {
context.beginPath();
context.moveTo(lastClick[0], lastClick[1]);
context.lineTo(x, y, 6);
context.strokeStyle = '#000000';
context.stroke();
clicks = 0;
}
lastClick = [x, y];
};
</script>
</body>
</html>
Place the starting and ending point in the block to make a line.
0 Comment(s)