Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

186
Views
Fabricjs responsive canvas items issues

i'm having some issues when the canvas width and height changes, i want the items to be in there same position..

i' using the latest version of fabricjs and using pdfjs library with it..

here's the code i'm using to try to fix it, but not working unfortunately:

function rescale_canvas_if_needed() {
  var optimal_dimensions = [$(".canvasWrapper").outerWidth(), $(".canvasWrapper").outerHeight()];
  var scaleFactorX = window.innerWidth / optimal_dimensions[0];
  var scaleFactorY = window.innerHeight / optimal_dimensions[1];
  if (scaleFactorX < scaleFactorY && scaleFactorX < 1) {
    canvas.setWidth(optimal_dimensions[0] * scaleFactorX);
    canvas.setHeight(optimal_dimensions[1] * scaleFactorX);
    canvas.setZoom(scaleFactorX);
  } else if (scaleFactorX > scaleFactorY && scaleFactorY < 1) {
    canvas.setWidth(optimal_dimensions[0] * scaleFactorY);
    canvas.setHeight(optimal_dimensions[1] * scaleFactorY);
    canvas.setZoom(scaleFactorY);
  } else {
    canvas.setWidth(optimal_dimensions[0]);
    canvas.setHeight(optimal_dimensions[1]);
    canvas.setZoom(1);
  }

  canvas.calcOffset();
  canvas.renderAll();
}


function handle_resize() {
  $(".canvas-container").hide();
  rescale_canvas_if_needed();
  $(".canvas-container").show();

}

to test it: try adding an drawing on the book and click on the zoom in and out and see how the canvas items position is changing.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I am going to make the assumption that you've calculated the scale factor correctly - I'd either have to think really critically about the scaleFactorX and scaleFactorY idea or just play with code (of which I am too lazy to do at this moment), but you may only need to check for 1 of them for scaling:

function rescale_canvas_if_needed() {
  var optimal_dimensions = [$(".canvasWrapper").outerWidth(), $(".canvasWrapper").outerHeight()];

  // add a rectangle the size of the current canvas and center it
  rect = new fabric.Rect({
    left: 0,
    top: 0,
    width: canvas.width,
    height: canvas.height,
    angle: 0,
    fill: 'rgba(255,255,255,0)',
    transparentCorners: true
    });
  canvas.add(rect);
  rect.center();

  // get an active selection of all objects

  canvas.discardActiveObject();
  var sel = new fabric.ActiveSelection(canvas.getObjects(), {canvas: canvas});
  canvas.setActiveObject(sel);
  canvas.requestRenderAll();

  // scale your canvas

  var scaleFactorX = window.innerWidth / optimal_dimensions[0];
  var scaleFactorY = window.innerHeight / optimal_dimensions[1];
  if (scaleFactorX < scaleFactorY && scaleFactorX < 1) {
    canvas.setWidth(optimal_dimensions[0] * scaleFactorX);
    canvas.setHeight(optimal_dimensions[1] * scaleFactorX);
    canvas.setZoom(scaleFactorX);
  } else if (scaleFactorX > scaleFactorY && scaleFactorY < 1) {
    canvas.setWidth(optimal_dimensions[0] * scaleFactorY);
    canvas.setHeight(optimal_dimensions[1] * scaleFactorY);
    canvas.setZoom(scaleFactorY);
  } else {
    canvas.setWidth(optimal_dimensions[0]);
    canvas.setHeight(optimal_dimensions[1]);
    canvas.setZoom(1);
  }
  canvas.calcOffset();

  // scale the active selection to the new width

  sel.scaleToWidth(canvas.width);

  // center the selection

  sel.center();

  // deselect the active selection

  canvas.discardActiveObject();

  // delete the rectangle

  canvas.remove(rect);

  canvas.requestRenderAll();
}


function handle_resize() {
  // I don't think you should have to hide or show the canvas-container
  $(".canvas-container").hide();
  rescale_canvas_if_needed();
  $(".canvas-container").show();

}

This will discard any active selections on the page before resizing it - maybe thats how you will want it, but you could get the active selection before resizing everything, then once it is done with all the resizing, reselect that active selection.

Warning: I didn't test this, so it may have a bug, invalid syntax, or other problems within that nature.

Let me know if you can't past another hurtle, given this bit of code.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!