How to get objects correctly placed when zoomed in on fabricjs canvas?

Question

I'm using fabricjs to load an image, use the mouse wheel to zoom on pointer position, and click to add a circle.

When no zoom, objects are created where clicked. When zoomed in, the only circle that is placed correctly is where you zoom in on (don't move the mouse after zoom, and click). If you click anywhere else while zoomed in, the circle is placed elsewhere. Which you can see after zooming out.

I've gone through many stack answers with related. Tried many things. No solution has worked. I'm very new to fabricjs, and the whole positioning system seems unnecessarily complicated.

How can I get the circle to the place where clicking on the image even when zoomed in?

https://jsfiddle.net/wonx3qvd/

Thanks in advance.

canvas.on('mouse:wheel', function (opt) {

    var delta = opt.e.deltaY;
    var pointer = canvas.getPointer(opt.e);
    var zoom = canvas.getZoom();
    zoom = zoom - delta * 0.01;
    if (zoom >= 20) {
        zoom = 20;
    }
    if (zoom <= 1) {
        zoom = 1;
        canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
    }

    canvas.zoomToPoint({
        x: opt.e.offsetX,
        y: opt.e.offsetY
    }, zoom);

    canvas.forEachObject(function (o) {
        o.setCoords();
    });

    opt.e.preventDefault();
    opt.e.stopPropagation();
});
canvas.on('mouse:up', function (opt) {
    if (opt.button === 1) {
        circle = new fabric.Circle({
            left: opt.e.offsetX,
            top: opt.e.offsetY,
            radius: 10,
            strokeWidth: 3,
            stroke: 'red',
            fill: null,
            opacity: .5,
            selectable: false,
            originX: 'center',
            originY: 'center'

        });
        circle.setCoords();
        group.addWithUpdate(circle);
        canvas.renderAll();
        canvas.calcOffset();
    }
});

Answer 1

Just set your cursor as the input coorinates for your cirlce object...

var pointer = canvas.getPointer();

    circle = new fabric.Circle({
      left: pointer.x,
      top: pointer.y,
      radius: 10,
      strokeWidth: 3,
      stroke: 'red',
      fill: null,
      opacity: .5,
      selectable: false,
      originX: 'center',
      originY: 'center'
    });

 var vw = $('#container').width(); var vh = $('#container').height(); var canvas, group, image = {}; // to be avail throughout $('#container').append('<canvas id="canvasview" width="' + vw + '" height="' + vh + '"></canvas>'); var canvas = new fabric.Canvas("canvasview", { fireRightClick: true, stopContextMenu: false }); canvas.setWidth(vw); canvas.setHeight(vh); canvas.imageSmoothingEnabled = false var ogi = $('img'); $(ogi).on('load', function() { // had to do this slop in particular case oiw = ogi.width(); var ogs = ogi.attr('src'); ogi.remove(); var img = document.createElement("img"); img.src = ogs; img.setAttribute("id", "photo"); //image ratio var nw = img.width * vh / img.height; image = new fabric.Image(img, {}); image.scaleToHeight(vh); image.center(); var name = new fabric.Text("WALLPAPERIMAGE", { left: 0, top: 0, fontSize: 10, cornerSize: 6 }); group = new fabric.Group([image, name], { lockMovementX: true, lockMovementY: true, hasControls: false, hasBorders: false, hasRotatingPoint: false, subTargetCheck: true, selectable: false }); canvas.add(group); group.scaleToHeight(vh); group.clipPath = image; group.center(); group.setCoords(); canvas.renderAll(); }); canvas.on('mouse:wheel', function(opt) { var delta = opt.e.deltaY; var pointer = canvas.getPointer(opt.e); var zoom = canvas.getZoom(); zoom = zoom - delta * 0.01; if (zoom >= 20) { zoom = 20; } if (zoom <= 1) { zoom = 1; canvas.viewportTransform = [1, 0, 0, 1, 0, 0] } canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom); canvas.forEachObject(function(o) { o.setCoords(); }); opt.e.preventDefault(); opt.e.stopPropagation(); }); canvas.on('mouse:up', function(opt) { if (opt.button === 1) { //set your cursor as the input coordinates var pointer = canvas.getPointer(); circle = new fabric.Circle({ left: pointer.x, top: pointer.y, radius: 10, strokeWidth: 3, stroke: 'red', fill: null, opacity: .5, selectable: false, originX: 'center', originY: 'center' }); circle.setCoords(); group.addWithUpdate(circle); canvas.renderAll(); canvas.calcOffset(); } });

 #container { width: 600px; height: 400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> </div> <img src="https://wallpaper-gallery.net/top/wallpapers-1.jpg" />