Rotate triangle around circle (2D)

Question

I'm trying to rotate a triangle around a circle, the triangle should always face outwards, meaning it should rotate around the circle, AND around its center I'm guessing. I found this question, which is something like what I need, but just in reverse. Another thing I need is to have the triangle pointed at the user's mouse coords. aka the triangle is something like an arrow.

Answer 1

I just edited the code you linked and replaced the rectangle with a triangle, and animate() with a mouse move listener, of course:

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cx = 100; var cy = 100; var radious = 10; var gap = 5; var triangleHeight = 25; var triangleBase = 10; redraw(cx + 1, cy); function redraw(mx, my) { mox = mx-cx; moy = my-cy; rotation = Math.atan2(moy, mox); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(cx, cy, radious, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); ctx.save(); ctx.translate(cx, cy); ctx.rotate(rotation); ctx.beginPath(); ctx.moveTo(radious+gap, -triangleBase/2); ctx.lineTo(radious+gap, triangleBase/2); ctx.lineTo(radious+gap+triangleHeight, 0); ctx.lineTo(radious+gap, -triangleBase/2) ctx.stroke(); ctx.restore(); } canvas.addEventListener("mousemove", function (e) { redraw(e.pageX, e.pageY); }, false);

 <canvas id="canvas"></canvas>

BTW, it's my very first piece of code in JS, so, feel free to correct my code if something is funny.