오징옆의 IT

<div>
  <canvas id="canvas" style="border: 1px solid black;  "></canvas>
</div>​

// 기존 canvas 코드
let canvas = new new fabric.Canvas('canvas');
let ctx = canvas.getContext("2d");
ctx.translate(ctx.canvas.width, ctx.canvas.height);
ctx.rotate(180 * Math.PI / 180);

// fabric js 코드
let canvas = new new fabric.Canvas('canvas');
let canvasCenter = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2) // center of canvas
let radians = fabric.util.degreesToRadians(180)
canvas.getObjects().forEach((obj) => {
    let objectOrigin = new fabric.Point(obj.left, obj.top)
    let new_loc = fabric.util.rotatePoint(objectOrigin, canvasCenter, radians)
    obj.top = new_loc.y
    obj.left = new_loc.x
    obj.angle += 180
    obj.setCoords()
});
canvas.renderAll()

Canvas로 작성된 기존 코드를 Fabric.js 라이브러리를 추가하여 업그레이드 한적이 있다.

기존에는 캔버스를 rotate한뒤 translate로 위치를 잡아주면 되는 코드다.

fabric js도 canvas 이기때문에 똑같이 먹힐거라 생각했지만, 이유는 모르겠고 잘 안되더라.

방법을 찾아보니 translate 과정을 top, left로 해결한 듯 하다.