how to add scrollbars to (a potentially infinite) canvas using fabric.js


Tags: javascript,css,html5,canvas,fabricjs

Problem :

I could be missing something here (I'm by no means an expert with HTML or CSS and have only just started using fabric).

It would seem that fabric is a nice tool for creating shape (object) based drawing applications but I can't figure out how to use it in such a way that a user can't lose objects by placing them off the canvas.

none of the demos have any functionality to prevent this but this seems like it would be a massive limitation to the framework. does anybody know of a way of solving this?

essentially, I want to allow users to arbitrarily add objects to the canvas and for usability, these objects will have to be spaced out and so the canvas will have to be potentially infinite. Obviously, the interaction area for the canvas will have to be of a fixed size.

Any help to get this sorted would be much apreciated



Solution :

Adding to Benicks answer - you can call the canvas.on("object:moving", function(e) {}) which is triggered when an object is moved. So the wrapper will have the follwing css:

  #wrapper{
    position: absolute;
    overflow: auto;
    max-height: 600px;
    max-width: 800px;
   }

with an index file:

<div id="wrapper">
  <canvas id="c2"></canvas>
</div>

To expand the canvas as an object is dragged to the edge of the wrapper you can do the following(done in coffee script):

 canvas.on "object:moving", (e) -> 
  currentCanvasHeight = canvas.height
  currentCanvasWidth = canvas.width

  # e.target returns the selected canvas object
  # Once the objects offset left value + the objects width is greater than the canvas
  # width, expand the canvas width
  if (e.target.left + e.target.currentWidth) > currentCanvasWidth
    canvas.setWidth currentCanvasWidth + 50
    $("#wrapper").scrollLeft e.target.left # scroll alongside the canvas expansion
    $('#wrapper').on 'scroll', canvas.calcOffset.bind(canvas) # to fix the mouse 
    #position bug issue 

  # do the same for the top
  if (e.target.top + e.target.currentHeight) > currentCanvasHeight
    canvas.setHeight currentCanvasHeight + 50
    $("#wrapper").scrollTop e.target.top 
    $('#wrapper').on 'scroll', canvas.calcOffset.bind(canvas)

    CSS Howto..

    How would you code this: Grid-breaking shapes

    How to deal with collapsing margins on html & body?

    How to add hover text on D3 disign?

    CSS vs jQuery How to create dynamic table style (zebra) without others plugins?

    How to set a td floating left in chrome?

    How to style form use css [closed]

    Percentages in CSS: How are they calculated internally?

    CSS: How to create colsgroup like semantic-ui way

    What is cufon and canvas and how to overwrite them

    How do I add hover cursor and still get move cursor on JQuery Table Sortable?

    How to create a header which fills the background with a color throughout the width

    How to prevent one table from obeying CSS rule

    How I can write CSS for IE. My code not work in IE10 nor 9,7,8?

    how to have spacing html/css

    How can I change color of visited cgridview row?

    Dilemma in deciding how to create CSS for H1, H2, H3 etc

    How to replicate PS multiply layer mode

    How to invert the anchoring inside a `
    ` to the bottom instead of the top?

    How to add javascript expression's output to my CSS?

    How to make list of all classes in the page using jQuery?

    How to get the div block to be centered in a modal window

    How to force free CSS resize on input element when its width is specified?

    How to make non standard shape buttons, non clickable outside of it's border

    How do I reduce the vertical space between list items in an unordered list?

    How to make floated right div fixed without changing the current look of the page

    how to reference background image urls in css through config entrys

    How to change the body background for three different div-s

    How to draw child element's border outside its parent in CSS (or simulate this effect)?

    How to change floating div's width to fill all the space they occupy?

    HTML5/CSS3 how to force text to require a certain width for rendering