I want to know how to rotate a line in canvas. Say I have the canvas set-up.

ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
ctx.closePath();

How do I rotate this line?

Thanks,

Alex

I want to know how to rotate a line in canvas. Say I have the canvas set-up.

ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
ctx.closePath();

How do I rotate this line?

Thanks,

Alex

• javascript
• canvas
• rotation
• line

• Rotation is a transformation. Have you checked the docs on how to set a transformation on the drawing context? – guest Commented Oct 8, 2014 at 23:14

2 Answers 2

Here's how to rotate a line segment between p1 & p2 around that segment's midpoint:

The idea is to:

• Save the unrotated state of the context using context.save

• Set the rotation point at the midpoint of the line using context.translate

• Rotate to a specified radian angle using context.rotate

• Draw the line. This is the tricky part...Since the canvas is already rotated and since the canvas origin is now the line's midpoint, you must moveTo minus the line's length/2 and lineTo the lines length/2: context.moveTo(-length/2,0); and context.lineTo(length/2,0);

• Restore the context to its unrotated state with context.restore

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var p1={x:75,y:75};
var p2={x:150,y:150};
var dx=p2.x-p1.x;
var dy=p2.y-p1.y;
var length=Math.sqrt(dx*dx+dy*dy);
var angle=Math.atan2(dy,dx);
var midX=(p2.x+p1.x)/2;
var midY=(p2.y+p1.y)/2;

console.log(midX,midY);

draw(angle);

requestAnimationFrame(animate);

function animate(time){
  requestAnimationFrame(animate);
  draw(angle);
  angle+=Math.PI/30;
}


function draw(radianAngle){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.save();
  ctx.translate(midX,midY);
  ctx.rotate(radianAngle);
  ctx.beginPath();
  ctx.strokeStyle='red';
  ctx.moveTo(-length/2,0);
  ctx.lineTo(length/2,0);
  ctx.stroke();
  ctx.restore();
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

Note: This code shows rotation around your line's midpoint, but you can rotate around any point by using context.translate(anyRotationPointX,anyRotationPointY);

To rotate anything you can use context method - rotate(). We can't rotate line like object (like in SVG), but we can - redraw canvas with new rotated line.

var canvas = document.getElementById("example"), 
    ctx = example.getContext('2d'),
    canvasWidth = canvas.width,
    canvasHeight = canvas.height,
    p1 = {x:canvasWidth/2+50,y:canvasHeight/2},
    p2 = {x:p1.x,y:p1.y+100},
    middlePoint = {x:(p1.x+p2.x)/2,y:(p1.y+p2.y)/2};

function rotate(degree,rotatePoint,drFunc) {
    rotatePoint = rotatePoint || {x:canvasWidth/2,y:canvasHeight/2};
    // Clear the canvas
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    // Move registration point to the center of the canvas
    ctx.translate(rotatePoint.x, rotatePoint.y);

    // Rotate 1 degree
    ctx.rotate((Math.PI / 180)*degree);

    // Move registration point back to the top left corner of canvas
    ctx.translate(-rotatePoint.x, -rotatePoint.y);

    drFunc();
}

function drFunc(){
    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.moveTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
    ctx.stroke();
    ctx.closePath();
}

rotate(1,middlePoint,drFunc);

Fiddle