Using fabric js How I can set left position of Pattern brush so it not only brush over image

问题

I am using pattern brush function of fabric js.

var texturePatternBrush = new fabric.PatternBrush(canvas);

My image is center align over canvas. Issue I am facing is my pattern brush is not align with main image. I want to overlap it on same position where my main image exist. It also must be no-repeat.

Secondly can I scale my pattern brush image so it is same size like main image when I resize my window?

Code I am using is

<div class="painting-area">
  <canvas id="canvas-front"></canvas>
</div>

Javascript Code

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>

<script>

window.onload=function(){


const canvas = new fabric.Canvas('canvas-front', {
                preserveObjectStacking: true,
                controlsAboveOverlay: true,
                enableRetinaScaling: false,
                width: 1360,
                height: 680,
                backgroundColor: '#ccc'

            });


window.fabric.Image.fromURL( 
'https://evolveapothecary.com/fabricbrush/frontnew.jpg', (img) => {
 img.set({
 left: 340,
 top: 0
 });
 img.scaleToHeight(680);
 img.scaleToWidth(680);
 canvas.add(img);
 })


canvas.isDrawingMode = true;

const img = new Image();

img.onload = function() {

var texturePatternBrush = new fabric.PatternBrush(canvas);

texturePatternBrush.source = img;

texturePatternBrush.width = 12;
texturePatternBrush.height = 12;
canvas.freeDrawingBrush = texturePatternBrush;
};
img.src = 'https://evolveapothecary.com/fabricbrush/frontdiscolor.png';


canvas.renderAll(); 

}
</script>

Js fiddle Link

https://jsfiddle.net/asif132/q79wfuLp/5/

来源：https://stackoverflow.com/questions/57845730/using-fabric-js-how-i-can-set-left-position-of-pattern-brush-so-it-not-only-brus

标签

javascript

html5-canvas

fabricjs