Test html canvas
HTML
<script src="https://cdn.pixabay.com/photo/2012/04/24/23/18/circle-41073_1280.png"></script>
<!DOCTYPE html>
<html lang="de">
<head>
<title>Test html canvas</title>
</head>
<body>
<canvas id="cumulatedView" width="250" height="250"></canvas>
</body>
</html>
CSS
canvas{
background-color: grey;
background-position: center;
background-size: 100% 100%;
}
JavaScript
var angle = 90; // Degree
var c = document.getElementById("cumulatedView");
var ctx = c.getContext("2d");
x1 = 125;
y1 = 125;
length = 100;
x2 = x1 + Math.cos(Math.PI * angle / 180) * length;
y2 = y1 + Math.sin(Math.PI * angle / 180) * length;
ctx.moveTo(x2, y2);
ctx.lineTo(x1, y1);
ctx.stroke();