Skip to content

Instantly share code, notes, and snippets.

@Vadi

Vadi/index.html

Created July 26, 2019 09:17
Show Gist options
  • Save Vadi/4c05330a8733a5fc24560bd1397f5322 to your computer and use it in GitHub Desktop.
Save Vadi/4c05330a8733a5fc24560bd1397f5322 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/diwukakiqe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id='container'></div>
<script id="jsbin-javascript">
"use strict";
(function () {
var canvasWidth = window.innerWidth,
canvasHeight = window.innerHeight,
centerX = 0,
centerY = 0,
arrowHeadLen = 10;
var container = document.getElementById("container");
container.style.position = "absolute";
container.style.left = centerX + "px";
container.style.top = centerY + "px";
var canvas = document.createElement("canvas");
canvas.id = "c";
canvas.width = canvasWidth;
canvas.height = canvasHeight;
container.append(canvas);
var ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
var startX = 0,
startY = 0,
storedLines = [],
isDown = false;
canvas.addEventListener("mousedown", handleMouseDown);
canvas.addEventListener("mousemove", handleMouseMove);
canvas.addEventListener("mouseup", handleMouseUp);
function handleMouseDown(e) {
e.preventDefault();
e.stopPropagation();
var _getMousePos = getMousePos(canvas, e);
var x = _getMousePos.x;
var y = _getMousePos.y;
isDown = true;
startX = x;
startY = y;
}
function handleMouseUp(e) {
e.preventDefault();
e.stopPropagation();
isDown = false;
var _getMousePos2 = getMousePos(canvas, e);
var x = _getMousePos2.x;
var y = _getMousePos2.y;
storedLines.push({ x0: startX, y0: startY, x1: x, y1: y });
draw();
}
function handleMouseMove(e) {
e.preventDefault();
e.stopPropagation();
if (!isDown) return;
draw();
var _getMousePos3 = getMousePos(canvas, e);
var x = _getMousePos3.x;
var y = _getMousePos3.y;
drawLine(ctx, { x0: startX, y0: startY, x1: x, y1: y });
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function draw(e) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < storedLines.length; i++) {
drawLine(ctx, storedLines[i]);
// Drawing the arrow heads after rendering the arrow.
drawArrow(ctx, storedLines[i]);
}
}
function drawLine(ctx, g) {
ctx.beginPath();
ctx.moveTo(g.x0, g.y0);
ctx.lineTo(g.x1, g.y1);
ctx.stroke();
}
// Function to draw the arrow heads.
function drawArrow(ctx, g) {
var x0 = g.x0;
var x1 = g.x1;
var y0 = g.y0;
var y1 = g.y1;
var diffX = x1 - x0;
var diffY = y1 - y0;
var arrowAngle = Math.atan2(diffY, diffX);
drawStartArrow(ctx, x0, y0, arrowAngle);
drawEndArrow(ctx, x1, y1, arrowAngle);
}
// Function to draw the arrow head at the starting point of the line.
function drawStartArrow(ctx, x0, y0, arrowAngle) {
ctx.beginPath();
// Starting coordinate of line.
ctx.lineTo(x0, y0);
// Draw arrow head in the negative direction of the starting point.
ctx.lineTo(x0 + arrowHeadLen * Math.cos(arrowAngle - Math.PI / 6), y0 + arrowHeadLen * Math.sin(arrowAngle - Math.PI / 6));
// Again move back to the starting coordinate.
ctx.moveTo(x0, y0);
// Draw arrow head in the positive direction of the starting point.
ctx.lineTo(x0 + arrowHeadLen * Math.cos(arrowAngle + Math.PI / 6), y0 + arrowHeadLen * Math.sin(arrowAngle + Math.PI / 6));
ctx.stroke();
}
// Function to draw the arrow head at the ending point of the line.
function drawEndArrow(ctx, x1, y1, arrowAngle) {
ctx.beginPath();
// Ending coordinate of line.
ctx.lineTo(x1, y1);
// Draw arrow head in the negative direction of the ending point.
ctx.lineTo(x1 - arrowHeadLen * Math.cos(arrowAngle - Math.PI / 6), y1 - arrowHeadLen * Math.sin(arrowAngle - Math.PI / 6));
// Again move back to the ending coordinate.
ctx.moveTo(x1, y1);
// Draw arrow head in the positive direction of the ending point.
ctx.lineTo(x1 - arrowHeadLen * Math.cos(arrowAngle + Math.PI / 6), y1 - arrowHeadLen * Math.sin(arrowAngle + Math.PI / 6));
ctx.stroke();
}
})();
</script>
<script id="jsbin-source-javascript" type="text/javascript">(function() {
const canvasWidth = window.innerWidth,
canvasHeight = window.innerHeight,
centerX = 0,
centerY = 0,
arrowHeadLen = 10;
const container = document.getElementById("container");
container.style.position = "absolute";
container.style.left = centerX + "px";
container.style.top = centerY + "px";
const canvas = document.createElement("canvas");
canvas.id = "c";
canvas.width = canvasWidth;
canvas.height = canvasHeight;
container.append(canvas);
const ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
let startX = 0,
startY = 0,
storedLines = [],
isDown = false;
canvas.addEventListener("mousedown", handleMouseDown);
canvas.addEventListener("mousemove", handleMouseMove);
canvas.addEventListener("mouseup", handleMouseUp);
function handleMouseDown(e) {
e.preventDefault();
e.stopPropagation();
let { x, y } = getMousePos(canvas, e);
isDown = true;
startX = x;
startY = y;
}
function handleMouseUp(e) {
e.preventDefault();
e.stopPropagation();
isDown = false;
let { x, y } = getMousePos(canvas, e);
storedLines.push({ x0: startX, y0: startY, x1: x, y1: y });
draw();
}
function handleMouseMove(e) {
e.preventDefault();
e.stopPropagation();
if (!isDown) return;
draw();
let { x, y } = getMousePos(canvas, e);
drawLine(ctx, { x0: startX, y0: startY, x1: x, y1: y });
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function draw(e) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < storedLines.length; i++) {
drawLine(ctx, storedLines[i]);
// Drawing the arrow heads after rendering the arrow.
drawArrow(ctx, storedLines[i]);
}
}
function drawLine(ctx, g) {
ctx.beginPath();
ctx.moveTo(g.x0, g.y0);
ctx.lineTo(g.x1, g.y1);
ctx.stroke();
}
// Function to draw the arrow heads.
function drawArrow(ctx, g) {
const { x0, x1, y0, y1 } = g;
const diffX = x1 - x0;
const diffY = y1 - y0;
const arrowAngle = Math.atan2(diffY, diffX);
drawStartArrow(ctx, x0, y0, arrowAngle);
drawEndArrow(ctx, x1, y1, arrowAngle);
}
// Function to draw the arrow head at the starting point of the line.
function drawStartArrow(ctx, x0, y0, arrowAngle) {
ctx.beginPath();
// Starting coordinate of line.
ctx.lineTo(x0, y0);
// Draw arrow head in the negative direction of the starting point.
ctx.lineTo(
x0 + arrowHeadLen * Math.cos(arrowAngle - Math.PI / 6),
y0 + arrowHeadLen * Math.sin(arrowAngle - Math.PI / 6)
);
// Again move back to the starting coordinate.
ctx.moveTo(x0, y0);
// Draw arrow head in the positive direction of the starting point.
ctx.lineTo(
x0 + arrowHeadLen * Math.cos(arrowAngle + Math.PI / 6),
y0 + arrowHeadLen * Math.sin(arrowAngle + Math.PI / 6)
);
ctx.stroke();
}
// Function to draw the arrow head at the ending point of the line.
function drawEndArrow(ctx, x1, y1, arrowAngle) {
ctx.beginPath();
// Ending coordinate of line.
ctx.lineTo(x1, y1);
// Draw arrow head in the negative direction of the ending point.
ctx.lineTo(
x1 - arrowHeadLen * Math.cos(arrowAngle - Math.PI / 6),
y1 - arrowHeadLen * Math.sin(arrowAngle - Math.PI / 6)
);
// Again move back to the ending coordinate.
ctx.moveTo(x1, y1);
// Draw arrow head in the positive direction of the ending point.
ctx.lineTo(
x1 - arrowHeadLen * Math.cos(arrowAngle + Math.PI / 6),
y1 - arrowHeadLen * Math.sin(arrowAngle + Math.PI / 6)
);
ctx.stroke();
}
})();
</script></body>
</html>
Raw
jsbin.diwukakiqe.js
"use strict";
(function () {
var canvasWidth = window.innerWidth,
canvasHeight = window.innerHeight,
centerX = 0,
centerY = 0,
arrowHeadLen = 10;
var container = document.getElementById("container");
container.style.position = "absolute";
container.style.left = centerX + "px";
container.style.top = centerY + "px";
var canvas = document.createElement("canvas");
canvas.id = "c";
canvas.width = canvasWidth;
canvas.height = canvasHeight;
container.append(canvas);
var ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
var startX = 0,
startY = 0,
storedLines = [],
isDown = false;
canvas.addEventListener("mousedown", handleMouseDown);
canvas.addEventListener("mousemove", handleMouseMove);
canvas.addEventListener("mouseup", handleMouseUp);
function handleMouseDown(e) {
e.preventDefault();
e.stopPropagation();
var _getMousePos = getMousePos(canvas, e);
var x = _getMousePos.x;
var y = _getMousePos.y;
isDown = true;
startX = x;
startY = y;
}
function handleMouseUp(e) {
e.preventDefault();
e.stopPropagation();
isDown = false;
var _getMousePos2 = getMousePos(canvas, e);
var x = _getMousePos2.x;
var y = _getMousePos2.y;
storedLines.push({ x0: startX, y0: startY, x1: x, y1: y });
draw();
}
function handleMouseMove(e) {
e.preventDefault();
e.stopPropagation();
if (!isDown) return;
draw();
var _getMousePos3 = getMousePos(canvas, e);
var x = _getMousePos3.x;
var y = _getMousePos3.y;
drawLine(ctx, { x0: startX, y0: startY, x1: x, y1: y });
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function draw(e) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < storedLines.length; i++) {
drawLine(ctx, storedLines[i]);
// Drawing the arrow heads after rendering the arrow.
drawArrow(ctx, storedLines[i]);
}
}
function drawLine(ctx, g) {
ctx.beginPath();
ctx.moveTo(g.x0, g.y0);
ctx.lineTo(g.x1, g.y1);
ctx.stroke();
}
// Function to draw the arrow heads.
function drawArrow(ctx, g) {
var x0 = g.x0;
var x1 = g.x1;
var y0 = g.y0;
var y1 = g.y1;
var diffX = x1 - x0;
var diffY = y1 - y0;
var arrowAngle = Math.atan2(diffY, diffX);
drawStartArrow(ctx, x0, y0, arrowAngle);
drawEndArrow(ctx, x1, y1, arrowAngle);
}
// Function to draw the arrow head at the starting point of the line.
function drawStartArrow(ctx, x0, y0, arrowAngle) {
ctx.beginPath();
// Starting coordinate of line.
ctx.lineTo(x0, y0);
// Draw arrow head in the negative direction of the starting point.
ctx.lineTo(x0 + arrowHeadLen * Math.cos(arrowAngle - Math.PI / 6), y0 + arrowHeadLen * Math.sin(arrowAngle - Math.PI / 6));
// Again move back to the starting coordinate.
ctx.moveTo(x0, y0);
// Draw arrow head in the positive direction of the starting point.
ctx.lineTo(x0 + arrowHeadLen * Math.cos(arrowAngle + Math.PI / 6), y0 + arrowHeadLen * Math.sin(arrowAngle + Math.PI / 6));
ctx.stroke();
}
// Function to draw the arrow head at the ending point of the line.
function drawEndArrow(ctx, x1, y1, arrowAngle) {
ctx.beginPath();
// Ending coordinate of line.
ctx.lineTo(x1, y1);
// Draw arrow head in the negative direction of the ending point.
ctx.lineTo(x1 - arrowHeadLen * Math.cos(arrowAngle - Math.PI / 6), y1 - arrowHeadLen * Math.sin(arrowAngle - Math.PI / 6));
// Again move back to the ending coordinate.
ctx.moveTo(x1, y1);
// Draw arrow head in the positive direction of the ending point.
ctx.lineTo(x1 - arrowHeadLen * Math.cos(arrowAngle + Math.PI / 6), y1 - arrowHeadLen * Math.sin(arrowAngle + Math.PI / 6));
ctx.stroke();
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment