fabric.js … how to center canvas

问题:

fabricjs will convert:

//  this DOM structure
<div id="wrapper">
  <canvas id="c"></canvas>
</div>

//  to this:
<div id="wrapper">
  <div class="canvas-container">
    <canvas class="upper-canvas"></canvas>
    <canvas class="lower-canvas" id="c"></canvas>
  </div>
</div>

... see this explanation

Because of the way fabric js wraps a canvas element, how do you keep a canvas horizontally centered.

here is similar question. here is a fiddle test

回答1:

apply

margin: 0 auto;

to class = canvas-container

canvas-container is automatically created by fabric.

see fiddle

回答2:

If you are using Angular, use the project's general stylesheet (instead of the component stylesheet) to provide the css rules as @dsdsdsdsd described .canvas-container {your styles..}. otherwise your styles may not apply.