Rotating straight line around point in canvas using javascript

Question

When I run this code it produces the lines "rotating" from 0 degrees to 180, the problem is the previous line does not get cleared (so the ctx.clearRect(0,0,400,200) does not work. In the console log it shows up as running (when I try to debug) but it is not actually clearing it. Does anyone have any idea how to fix this?

var canvas = document.getElementById("radarImage");
var ctx = canvas.getContext("2d");

var angle = 0
function incrementAngle(){

    angle++;
    if(angle>180){
        angle=0;

        }


}

function rotateRadar(){

    incrementAngle();
    ctx.clearRect(0,0,400,200);
    ctx.save();
    ctx..translate(-200,-200);
    ctx.rotate((Math.PI/180)*angle);
    ctx.translate(-200,-200);
    ctx.moveTo(200,200);
    ctx.lineTo(0,200);
    ctx.stroke();
    ctx.restore;
}
setInterval(rotateRadar,200);

It's because you always repaint the same Path. You have to call `ctx.beginPath()` at each iteration. There are a lot of dupes in here, let me find one. To make you wait a little, here is a snippet, were typos where corrected : https://jsfiddle.net/vyxu7eev/ — Kaiido, Apr 20 '16 at 08:13
Not a perfect dupe, but gives a why so should work for future readers too : http://stackoverflow.com/questions/21869609/why-does-omitting-beginpath-redraw-everything — Kaiido, Apr 20 '16 at 08:16
I actually figured this out after about 5 hours of messing about with it. Instead of using clearRect(); I made another function that has my radar background and I called that function in there. The whole thing works fine now. thank you for the responses guys. — Ahsin, Apr 22 '16 at 03:42
The issue according to my understanding from what I have seen on-line is that if you rotate/translate inside a canvas then the clearRect(); function apparently does not work any more. — Ahsin, Apr 22 '16 at 03:43
yes it still does work, but it's also transformed (rotated/translated/skewed). You can reset the canvas transformation by calling `ctx.setTransform(1,0,0,1,0,0)`. But your problem here was the `beginPath`, transformations were resetted by `ctx.save();...ctx.restore();` — Kaiido, Apr 22 '16 at 04:04

score 0 · Answer 1 · edited May 23 '17 at 11:52

Edit: You should call your updates constantly using request animation frame: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

If you are open to using a library for working with canvas then easel js is could be a possibility: http://www.createjs.com/easeljs

Another SO user asked a similar question for Easel Js and there are some good answers that may be relavant to you: EaselJS - Rotate a shape around its center

score 0 · Answer 2 · answered Apr 20 '16 at 06:23

Simply you cant rotate a line cont in canvas, you have to read sin,cos to rotate a line in canvas. Hope this should help you.JsFiddle

    context.clearRect(0,0,400,200);
    context.beginPath();
    context.moveTo(x,y);
    x1=Math.cos(startAngle)*radius+10;
    y1=Math.sin(startAngle)*radius+10;
    console.log(x1,y1);
    context.lineTo(x1,y1);
    context.stroke();

Rotating straight line around point in canvas using javascript

2 Answers2