CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvasfabricjs
Kavan Pancholi
Kavan Pancholi

Reputation: 602

Fabric JS: Set X Y Coordinates in Canvas Image | Set Position in Canvas Image

How to set X, Y Coordinates in canvas image?

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

e.g: sx and sy in HTML canvas drawImage() Method.

What is similar to this in fabric.js?

How to set position in image in canvas in Fabric js?

Upvotes: 5

Views: 9815

Answers (1)

alessandrio
alessandrio

Reputation: 4370

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

this is in native JS

  • img Specifies the image, canvas, or video element to use
  • sx Optional. The x coordinate where to start clipping
  • sy Optional. The y coordinate where to start clipping
  • swidth Optional. The width of the clipped image
  • sheight Optional. The height of the clipped image
  • x The x coordinate where to place the image on the canvas
  • y The y coordinate where to place the image on the canvas
  • width Optional. The width of the image to use (stretch or reduce the image)
  • height Optional. The height of the image to use (stretch or reduce the image)

in fabric:

var canvas = new fabric.Canvas('canvas', { selection: false });
    fabric.Image.fromURL("http://timeplusq.com/dakshin/clip03.png", function(obj) {
    canvas.add(obj.set({
        width: 294,
        hasControls: false,
        //cornerColor: 'green',cornerSize: 16,transparentCorners: false,
        selection: false,       
        lockRotation:false,
        //lockMovement: false,lockMovementY: false,lockMovementX: false,
        //lockUniScaling: false,lockScalingY:false, lockScalingX:false,
        hoverCursor: 'default',
        hasRotatingPoint: false,
        hasBorders: true,borderColor: 'red',borderSize: 2,
        transparentBorder: false,
        height: 294,
        angle: 0,
        cornersize: 10,
        left: 2, 
        top: 2
    }));
    canvas.setActiveObject(canvas.item(0));
    canvas.item(0).selectable = false;
    canvas.backgroundColor = 'rgba(0,0,255,0.3)';
    //img.bringToFront();
    canvas.renderAll();
    });

JSFIDDLE

Upvotes: 5

Related Questions