如何动态更改在Fabric.js中创建的画布实例的位置

Question

I have make a canvas instance through Fabric.js.

var canInstance = new fabric.Canvas("drawCanvas");

When I change its position after performing some calculation, it seems no change in canvas position.

canInstance.left = "250px";
canInstance.top = "200px";

Is there any way to change position of canvas instance dynamically?

Answer 1

The canvas object returned by fabric.getCanvas does not have left and top properties.

You need to get the actual DOM canvas and modify its style properties:

var canvasNode = canInstance.getElement(); //return the HTMLCanvasElement.
canvasNode.style.position = 'relative';
canvasNode.style.left = '250px';
canvasNode.style.top = '200px';

I've changed the position property to relative because, by default, elements have position: static, which causes the layout engine to ignore top and left properties. If your canvas have a explicit positioning (different to static), just remove that line.