CODEWITHSUNDEEP
javascripthtml5-canvasfabricjs
Kenzo
Kenzo

Reputation: 1837

Image only appears when selected on canvas Fabric JS

I am trying to add image on canvas with fabric JS , but the image only appears when clicked or selected its surrounding area which is group object. The image is supposed to show up immediately when the page finish loading. Here is the snippet for the source code. Any help would be appreciated.

const canvas = new fabric.Canvas('canvas', {
  selection: false
});

const circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: '#eef',
  originX: 'center',
  originY: 'center'
});

const text = new fabric.Text('Hello World', {
    left: circle.left,
    top: circle.top,
    fontFamily: 'Arial',
    fontWeight: 'bold',
    fontSize: 10,
    fill: 'black',
    originX: 'center',
    originY: 'center',
});

const group = new fabric.Group([circle, text], {
    left: circle.left,
    top: circle.top,
    originX: 'center',
    originY: 'center'
});

canvas.add(group);

fabric.Image.fromURL('http://placekitten.com/200/300', function (img) {

    canvas.add(img.set({
          left: group.left + 20,
          top: group.top,
          perPixelTargetFind: true,
          padding: 0,
          hasBorders: false,
          hasControls: false,
          width: 16,
          height: 16,
          originX: 'center',
          originY: 'center',
      }));

    img.on('click', function () {
        console.log('img clicked');
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="canvas" width="500" height="300" style="border: 2px solid green;"></canvas>

Upvotes: 0

Views: 1436

Answers (2)

Alexander Istomin
Alexander Istomin

Reputation: 146

const canvas = new fabric.Canvas('canvas', {
  selection: false
});

const circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: '#eef',
  originX: 'center',
  originY: 'center'
});

const text = new fabric.Text('Hello World', {
    left: circle.left,
    top: circle.top,
    fontFamily: 'Arial',
    fontWeight: 'bold',
    fontSize: 10,
    fill: 'black',
    originX: 'center',
    originY: 'center',
});

const group = new fabric.Group([circle, text], {
    left: circle.left,
    top: circle.top,
    originX: 'center',
    originY: 'center'
});

canvas.add(group);

fabric.Image.fromURL('http://placekitten.com/200/300', function (img) {

    canvas.add(img.set({
          left: group.left + 20,
          top: group.top,
          perPixelTargetFind: true,
          padding: 0,
          hasBorders: false,
          hasControls: false,
          width: 16,
          height: 16,
          originX: 'center',
          originY: 'center',
      }));

/* will not work - use mousedown or you should use events provided by fabric
    img.on('click', function () {
        console.log('img clicked');
    });
*/
// use this option if you want to load image from other domain
}, {crossOrigin: 'anonymous'});

const mouseDownHandler = (e) => {
console.log('mouseDownHandler: yep! someone clicked on canvas');
if(e.target && e .target.type === "image") console.log('mouseDownHandler: and smashed image!');
}

const selectionCreatedHandler = (e) => {
if(e.target && e .target.type === "image") console.log('selectionCreatedHandler: yep! someone selected image')
}

const selectionUpdatedHandler = (e) => {
if(e.target && e .target.type === "image") console.log('selectionUpdatedHandler: yep! someone selected object instead of previously selected')
}


canvas.on('selection:created', selectionCreatedHandler);
canvas.on('selection:updated', selectionUpdatedHandler);
canvas.on('mouse:down', mouseDownHandler);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="canvas" width="500" height="300" style="border: 2px solid green;"></canvas>

Upvotes: 1

Durga
Durga

Reputation: 15604

You need to use mousedown event not click. And use crossOrigin property for image object, if you are loading from another server.

DEMO

const canvas = new fabric.Canvas('canvas', {
  selection: false
});

const circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: '#eef',
  originX: 'center',
  originY: 'center'
});

const text = new fabric.Text('Hello World', {
  left: circle.left,
  top: circle.top,
  fontFamily: 'Arial',
  fontWeight: 'bold',
  fontSize: 10,
  fill: 'black',
  originX: 'center',
  originY: 'center',
});

const group = new fabric.Group([circle, text], {
  left: circle.left,
  top: circle.top,
  originX: 'center',
  originY: 'center'
});

canvas.add(group);

fabric.Image.fromURL('http://placekitten.com/200/300', function(img) {
  img.set({
    left: group.left + 20,
    top: group.top,
    perPixelTargetFind: true,
    padding: 0,
    hasBorders: false,
    hasControls: false,
    width: 16,
    height: 16,
    originX: 'center',
    originY: 'center',
  })
  canvas.add(img);
  
  img.on('mousedown', function() {
    console.log('img clicked');
  });

}, {
  crossOrigin: 'annonymous'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="canvas" width="500" height="300" style="border: 2px solid green;"></canvas>

Upvotes: 1

Related Questions