CODEWITHSUNDEEP
javascripthtml
cypatrick
cypatrick

Reputation: 151

Changing the Center of Origin. (Javascript)

I have been cracking my head towards this problem. May I know is there any way to change the point of origin from the top left coordinate to bottom left coordinate? Below is the code. Notice that I wish to rotate the last rectangle in the anticlockwise direction with respect to the bottom left coordinate. 

var canvas = document.getElementById("DemoCanvas");
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    for (i = 0; i < 500; i += 50) {
        ctx.moveTo(0, i);
        ctx.strokeStyle = "#E8D8D8";
        ctx.lineTo(canvas.width, i);
        ctx.stroke();

    }
    for (i = 0; i < 511; i += 50) {
        ctx.moveTo(i, 0);
        ctx.strokeStyle = "#E8D8D8";
        ctx.lineTo(i, canvas.height);
        ctx.stroke();
    }
    // Save the unrotated context of the canvas.   
    ctx.save();
    ctx.fillStyle = "#ff0000";
    ctx.fillRect(2, 5, 100, 150);
    //Move to the center of the canvas to (50,10) point.   
    ctx.translate(100, 5);
    // Rotate the canvas by 30 degrees.
    ctx.rotate((Math.PI / 180) * 30);
    ctx.fillStyle = "#ff0000";
    // Draw another rectangle
    ctx.fillRect(0, 0, 100, 150);

    ctx.translate(100, 0);
    // Rotate the canvas by 30 degrees.
    ctx.rotate((Math.PI / 180) * 30);
    ctx.fillStyle = "#ff0000";
    // Draw another rectangle
    ctx.fillRect(0, 0, 100, 150);
    // Restore the unrotated context   

    ctx.translate(100, 0);
    ctx.rotate((Math.PI / 180) * -30);
    ctx.fillStyle = "#ff0000";
    // Draw another rectangle
    ctx.fillRect(0, 0, 100, 150);

    ctx.restore();

}
<!DOCTYPE html>
<html>

<head>
    <title>Road</title>
</head>

<body>
    <canvas id="DemoCanvas" width="300" height="400"></canvas>
</body>

</html>

I wish to using this method to draw out a highway route. Any help is highly appreciate. Please help me thanks.

Upvotes: 0

Views: 443

Answers (1)

Chandan Rauniyar
Chandan Rauniyar

Reputation: 824

Use the following

ctx.translate(0, canvas.height);
ctx.scale(1, -1);


    var canvas = document.getElementById("DemoCanvas");
    if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    for (i = 0; i < 500; i += 50) {
        ctx.moveTo(0, i);
        ctx.strokeStyle = "#E8D8D8";
        ctx.lineTo(canvas.width, i);
        ctx.stroke();         
    }
    
    for (i = 0; i < 511; i += 50) {
        ctx.moveTo(i, 0);
        ctx.strokeStyle = "#E8D8D8";
        ctx.lineTo(i, canvas.height);
        ctx.stroke();
    }

    // Save the unrotated context of the canvas.   
    ctx.save();
    ctx.translate(0, canvas.height);
    ctx.scale(1, -1);
    ctx.fillStyle = "#ff0000";
    ctx.fillRect(2, 5, 100, 150);
    
    //Move to the center of the canvas to (50,10) point.   
    ctx.translate(100, 5);
    // Rotate the canvas by 30 degrees.
    ctx.rotate((Math.PI / 180) * 30);
    ctx.fillStyle = "#ff0000";
    // Draw another rectangle
    ctx.fillRect(0, 0, 100, 150);

    ctx.translate(100, 0);
    // Rotate the canvas by 30 degrees.
    ctx.rotate((Math.PI / 180) * 30);
    ctx.fillStyle = "#ff0000";
    // Draw another rectangle
    ctx.fillRect(0, 0, 100, 150);
    // Restore the unrotated context   

    ctx.translate(100, 0);
    ctx.rotate((Math.PI / 180) * -30);
    ctx.fillStyle = "#ff0000";
    // Draw another rectangle
    ctx.fillRect(0, 0, 100, 150);

    ctx.restore();    
}
<!DOCTYPE html>
<html>

<head>
    <title>Road</title>
</head>

<body>
    <canvas id="DemoCanvas" width="300" height="400"></canvas>
</body>

</html>

Upvotes: 2

Related Questions