Проблемы с координатами после поворота на холсте

Question

У меня проблемы с прорисовкой некоторых канонов на холсте.

Моя цель - нарисовать эти: https://ibb.co/b6Hsc4w

 0 1 2 3 4 5
0    
1    X X X
2    X   X
3    X X X
4
5

var canvas = document.querySelector('canvas');
canvas.width = 600;
canvas.height = 400;
var c = canvas.getContext('2d');

function Line(x, y, length, height, angle, color) {
    this.x = x;
    this.y = y;
    this.length = length;
    this.height = height;
    this.angle = angle;
    this.color = color;

    this.draw = function () {
        c.save();

        c.translate(this.x, this.y);
        if (this.angle > 0) {
            c.rotate(this.angle * Math.PI / 180);
        }

        c.fillStyle = this.color;
        c.fillRect(0, 0, this.length, this.height);

        c.restore();
    };
    this.draw();
}

new Line(2, 1, 3, 1, 0, "black");
new Line(4, 1, 3, 1, 90, "green");
new Line(4, 3, 3, 1, 180, "red");
new Line(2, 3, 3, 1, 270, "blue");

, но используя полученный код: https://ibb.co/vwRX1sG

 0 1 2 3 4 5
0    X
1    X X X
2  X X X  
3      X 
4
5

Похоже, что исходная точка не работает правильно

Спасибо за продвинутый уровень

HTML содержит только элемент canvas, и я не использую никакую специальную библиотеку.

Answer 1

Проблема в том, что вы вращаетесь по углам блоков, а не по центрам.Ниже я добавил 0.5 к первому преобразованию, а затем вычел его во втором преобразовании после поворота.Вы можете видеть это работает здесь скрипка

function Line(x, y, length, height, angle, color) {
    this.x = x;
    this.y = y;
    this.length = length;
    this.height = height;
    this.angle = angle;
    this.color = color;

    this.draw = function () {
        c.save();

        c.translate(this.x+0.5, this.y+0.5);
        if (this.angle > 0) {
            c.rotate(this.angle * Math.PI / 180);
        }
        c.translate(-0.5, -0.5);

        c.fillStyle = this.color;
        c.fillRect(0, 0, this.length, this.height);

        c.restore();
    };
    this.draw();
}

new Line(2, 1, 3, 1, 0, "black");
new Line(4, 1, 3, 1, 90, "green");
new Line(4, 3, 3, 1, 180, "red");
new Line(2, 3, 3, 1, 270, "blue");