Draw a series of rotated lines with HTML canvas - html

Question

I want to draw a polyline like this
from an array consisting of sets of angles and lengths (50 and 100, 90 and 20, 90 and 30 etc..)
Any ideas?

Answer 1

that was a hard one ...
e.g array of objects of angle & lengths:
var arr = [
{ angle: 0, h: 50 },
{ angle: 90, h: 60 },
{ angle: 180, h: 70 },
{ angle: 270, h: 80 },
{ angle: 180, h: 90 }
];
the following draw method will draw the lines from the previous array,
function getAngle(ctx, x, y, angle, h) {
var radians = angle * (Math.PI / 180);
return { x: x + h * Math.cos(radians), y: y + h * Math.sin(radians) };
}
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
var pos = { x: 400, y: 400 };
for (var i = 0; i < arr.length; i++) {
ctx.moveTo(pos.x, pos.y);
pos = getAngle(ctx, pos.x, pos.y, arr[i].angle, arr[i].h);
ctx.lineTo(pos.x, pos.y);
}
ctx.stroke();
}
}
you can call the draw after the canvas element
<div style="width:800px;height:800px;border:solid 1px red;">
<canvas id="canvas" width="800" height="800"></canvas>
</div>
<script type="text/javascript">
draw();
</script>
EDIT:
try changing draw function to this,
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
var pos = { x: 400, y: 400 },
angle = 0;
for (var i = 0; i < arr.length; i++) {
angle += arr[i].angle;
angle = (arr[i].angle + angle) % 360;
ctx.moveTo(pos.x, pos.y);
pos = getAngle(ctx, pos.x, pos.y, arr[i].angle + angle, arr[i].h);
ctx.lineTo(pos.x, pos.y);
}
ctx.stroke();
}
}

Answer 2

I had a similar problem as Morten J and tried Shlomi Komemi's second draw function and it works fine ... but only for the Array he gave with only multiples of 90°.
However, if you try 30° you will notice that something is wrong because a right angle is drawn.
I figured out that the reason for this is that angle and arr[i].angle are summed up 3 times.
Here is the corrected version of the function:
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
var pos = { x: 400, y: 400 },
angle = 0;
for (var i = 0; i < arr.length; i++) {
angle = (arr[i].angle + angle) % 360;
ctx.moveTo(pos.x, pos.y);
pos = getAngle(ctx, pos.x, pos.y, angle, arr[i].h);
ctx.lineTo(pos.x, pos.y);
}
ctx.stroke();
}
}
That should work (but I guess the Morten does not care after 3 years...).