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?
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();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With