Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to rotate a triangle without rotating the entire canvas?

I'm new to working with <canvas> and terrible at maths. I'm drawing a simple equilateral triangle on my canvas with this function that has borrowed code from somebody else (don't hate me):

drawTriangle(PosX, PosY, SideLength, Orientation) {
    context.beginPath();

    var sides = 3;

    var a = ((Math.PI * 2) / sides);

    context.moveTo(PosX + SideLength, PosY);

    for (var i = 1; i < sides + 1; i++) {
        context.lineTo(PosX + SideLength * Math.cos(a*i), PosY + SideLength * Math.sin(a*i));
    }

    context.closePath();

    return true;
}

The function would only know the centre co-ordinates of the triangle and the orientation to point it at, nothing else.

It currently draws the triangle successfully but "points" east.

How do I rotate the triangle using the Orientation parameter (degrees) without rotating the entire canvas like other answers suggest?

like image 818
Jared Avatar asked Jul 07 '16 05:07

Jared


People also ask

How do you rotate shapes in canvas?

To rotate a shape around its own center, you must first translate the canvas to the center of the shape, then rotate the canvas, then translate the canvas back to 0,0, and then draw the shape.

How do you rotate a canvas 90 degrees?

This tool can be found in the “Edit” menu or by pressing the keyboard shortcut “Ctrl+Alt+R”. Just click on the “Canvas Rotation” tool and then click and drag your mouse in the direction that you want to rotate your canvas.

How do you rotate a square in canvas?

rotate(deg * Math. PI/180) rotates the square to 45 degrees (Note that the parameter is in radians, not degrees) ctx. fillRect( x, y, w, h ) draws the square.


2 Answers

Here's a function that draws any regular polygon and a specified angle:

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

var sideCount=3;
var size=40;
var centerX=50;
var centerY=50;
var strokeWidth=4;
var strokeColor='purple';
var fillColor='skyblue';
var rotationDegrees=0;
var rotationIncrement=1;
var nextTime=0;
var delay=1000/60*1;

requestAnimationFrame(animate);

function animate(time){
    if(time<nextTime){requestAnimationFrame(animate);return;}
    nextTime=time+delay;
    ctx.clearRect(0,0,cw,ch);
    drawPolygon(centerX,centerY,sideCount,size,strokeWidth,strokeColor,fillColor,rotationDegrees);
    rotationDegrees+=rotationIncrement;
    requestAnimationFrame(animate);
}

function drawPolygon(centerX,centerY,sideCount,size,strokeWidth,strokeColor,fillColor,rotationDegrees){
    var radians=rotationDegrees*Math.PI/180;
    ctx.translate(centerX,centerY);
    ctx.rotate(radians);
    ctx.beginPath();
    ctx.moveTo (size * Math.cos(0), size * Math.sin(0));          
    for (var i = 1; i <= sideCount;i += 1) {
        ctx.lineTo (size * Math.cos(i * 2 * Math.PI / sideCount), size * Math.sin(i * 2 * Math.PI / sideCount));
    }
    ctx.closePath();
    ctx.fillStyle=fillColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    ctx.stroke();
    ctx.fill();
    ctx.rotate(-radians);
    ctx.translate(-centerX,-centerY);    }
<canvas id="canvas" width=512 height=512></canvas>
<canvas id="canvas" width=512 height=512></canvas>
like image 134
markE Avatar answered Sep 22 '22 13:09

markE


Please look at this fiddle. You can send the orientation as an optional paramenter. It accepts 'east', 'west', 'north','south'. Please validate.

` function drawTriangle(PosX, PosY, SideLength, Orientation) {

if (!Orientation) {
   Orientation = 'east';
}

context.beginPath();

var sides = 3;

var a = ((Math.PI * 2) / sides);
// the components have negative contributions
if (Orientation === 'west' || Orientation === 'north') {
    SideLength *= -1;
}

if (Orientation === 'east' || Orientation === 'west') {
    context.moveTo(PosX + SideLength, PosY);

    for (var i = 1; i < sides + 1; i++) {
        context.lineTo(PosX + SideLength * Math.cos(a*i), PosY + SideLength * Math.sin(a*i));
    }
}
else if (Orientation === 'south' || Orientation === 'north') {
    context.moveTo(PosY, PosX + SideLength);

    for (var i = 1; i < sides + 1; i++) {
        context.lineTo(PosY + SideLength * Math.sin(a*i), PosX + SideLength * Math.cos(a*i));
    }
}
context.stroke();
context.closePath();

}`

like image 28
Ayan Avatar answered Sep 23 '22 13:09

Ayan