How to set div back after being pushed by Fabric.js canvas.setHeigth or setWidth?

Question

I'm going to make a twibbon-like website using Fabric.js for my school so students can post a picture and download it with my school campaign image on it and share it to Instagram.

to download the image in high resolution and maintain the canvas to be small enough to fit the screen, I'm using this solution I found from another stackoverflow question here

the problem is the canvas is still small but it push my div or buttons away by the value of canvas.setWidth or setHeigth. here's my page looks like. how can i fix this and bring back my buttons?

here's my code :

.canvas-container canvas { 
  width: 400px !important; 
  height: 500px !important; 
  border: 1px solid blue;
}
body{
  font-family: 'Helvetica', Tahoma, Geneva, Verdana, sans-serif;   
}
h1{
  color: rgb(119, 214, 124);
}
.site{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
}

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="cssTest.css">
    <title>Twibbon</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
    <script src="FileSaver.js"></script>
    <script src="canvas-toBlob.js"></script>
    </head>
    <body>
    <div class="site">
        <h1 class="title">Fortafaste Campaign</h1>
        <canvas id="c"></canvas>
        <input type="file" id="d" class="button">
        <input id="download" type="button" value="download" />
        <h2 class="contact">instagram</h2>
    </div>
    <script>
        var canvas = new fabric.Canvas('c');
        canvas.setWidth(1080);
        canvas.setHeight(1350);

        var canvasWrapper = document.getElementById('c');
        var canvasWrapperWidth = canvasWrapper.clientWidth;
        $(function () {
            $(":file").change(function () {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });
        fabric.Image.fromURL('twibbon2 fortafaste.png',function(img){
            img.scaleToWidth(canvas.getWidth());
            canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
        });
        function imageIsLoaded(e) {
            fabric.Image.fromURL(e.target.result,function(img){
                var aspectRatio = 1350/1080;
                var factor = 1080 / img.width;
                img.set({
                    scaleX: factor,
                    scaleY: factor 
                });
                canvas.add(img);
                canvas.sendToBack(img);
            });
        };
       
        $("#download").click(function(){
            $("#c").get(0).toBlob(function(blob){
                saveAs(blob, "myIMG.png");
            });
        });
    </script>
</body>
</html>

You are setting the width of your canvas to 1080, which pushes everything to the right of it that much farther away. If that is absolutely necessary to the function of the app, you can absolute position your 'choose file' button https://jsfiddle.net/0Luwkhbz/3/ Otherwise, yeah, just reduce the canvas width. — Devin Fields, Aug 03 '18 at 17:34

score 0 · Answer 1 · answered Aug 04 '18 at 01:11

I recommend you to simplify your design...

Keep all the information and action buttons on top and the canvas below, here is an example:

.canvas-container canvas { 
  width: 400px !important; 
  height: 500px !important; 
  border: 1px solid blue;
}
body{
  font-family: 'Helvetica', Tahoma, Geneva, Verdana, sans-serif;   
}
h1{
  color: rgb(119, 214, 124);
}

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="cssTest.css">
    <title>Twibbon</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
    <script src="FileSaver.js"></script>
    <script src="canvas-toBlob.js"></script>
    </head>
    <body>
    <div class="site">
        <div>
          <h1 class="title">Fortafaste Campaign</h1>
          <input type="file" id="d" class="button">
          <input id="download" type="button" value="download" />
          <h2 class="contact">instagram</h2>
        </div>
        <canvas id="c"></canvas>
    </div>
    <script>
        var canvas = new fabric.Canvas('c');
        canvas.setWidth(1080);
        canvas.setHeight(1350);

        var canvasWrapper = document.getElementById('c');
        var canvasWrapperWidth = canvasWrapper.clientWidth;
        $(function () {
            $(":file").change(function () {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });
        fabric.Image.fromURL('twibbon2 fortafaste.png',function(img){
            img.scaleToWidth(canvas.getWidth());
            canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
        });
        function imageIsLoaded(e) {
            fabric.Image.fromURL(e.target.result,function(img){
                var aspectRatio = 1350/1080;
                var factor = 1080 / img.width;
                img.set({
                    scaleX: factor,
                    scaleY: factor 
                });
                canvas.add(img);
                canvas.sendToBack(img);
            });
        };
       
        $("#download").click(function(){
            $("#c").get(0).toBlob(function(blob){
                saveAs(blob, "myIMG.png");
            });
        });
    </script>
</body>
</html>

How to set div back after being pushed by Fabric.js canvas.setHeigth or setWidth?

1 Answers1