fabric.js Größe Leinwand auf den Bildschirm passt

1. Verwenden Sie css, um Ihr die richtige Auflösung für die Leinwand:

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 800;
canvas.height = 600;

css:

/* media query 1 */
    #canvas{
       width: 400px;
       height: 250px; 
    }

/* media query 2 */
#canvas{
       width: 200px;
       height: 120px; 
    }

Vorteile:

Alle die Auflösung ist gegeben durch Leinwand Breite und Höhe (800x600 Pixel)

Nachteile:

Passen quadratischen Leinwände Seitenverhältnis (1:1), Probleme mit der Ausgabe
für komische Seitenverhältnisse, wo Sie brauchen, um zu berechnen, css Höhe
basiert,

original height / original width * new width = new height;

dies ist aus meiner Liga in css...

Gelesen vor einiger Zeit fabric.js git-Probleme Abschnitt, wo Sie, Technik
css (Größe) ist nicht empfohlen wegen der Langsamkeit und die falsche Objekte
Transaktionen, diese können geändert werden, ich weiß, ich habe getestet und Objekte wurden
falsch die Größe neu (zufällige farbigen Pixel, Transaktionen Schatten bleiben
im canvas-Bereich , in anderen Worten ein Chaos)

2. Re-Größe der Leinwand, um die exakte dimension (Auflösung), wenn Sie brauchen, um zu senden, und erhalten dann das Bild generiert

Nur in der Größe Ihrer Leinwand am Fenster in der Größe (responsive canvas) und wenn Sie brauchen, um zu exportieren, um die genaue dimension, die Sie brauchen, um wieder zu der Größe Ihrer Leinwand zu exakten pixel-Auflösung, oder erstellen Sie eine andere Leinwand versteckt.

diesem Beispiel ist die 1:1-ration Leinwand (Sie müssen, um das Seitenverhältnis auf die Leinwand und Objekte innen):

$(window).resize(function (){
 if (canvas.width != $(".container").width()) {
            var scaleMultiplier = $(".container").width() / canvas.width;
            var objects = canvas.getObjects();
            for (var i in objects) {
                objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
                objects[i].scaleY = objects[i].scaleY * scaleMultiplier;
                objects[i].left = objects[i].left * scaleMultiplier;
                objects[i].top = objects[i].top * scaleMultiplier;
                objects[i].setCoords();
            }

            canvas.setWidth(canvas.getWidth() * scaleMultiplier);
            canvas.setHeight(canvas.getHeight() * scaleMultiplier);
            canvas.renderAll();
            canvas.calcOffset();
        }
});

Bei submit export-canvas-Daten re-Größe der Leinwand, um die gewünschte Auflösung, voila:

function GetCanvasAtResoution(newWidth)
  {
    if (canvas.width != newWidth) {
                var scaleMultiplier = newWidth / canvas.width;
                var objects = canvas.getObjects();
                for (var i in objects) {
                    objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
                    objects[i].scaleY = objects[i].scaleY * scaleMultiplier;
                    objects[i].left = objects[i].left * scaleMultiplier;
                    objects[i].top = objects[i].top * scaleMultiplier;
                    objects[i].setCoords();
                }

                canvas.setWidth(canvas.getWidth() * scaleMultiplier);
                canvas.setHeight(canvas.getHeight() * scaleMultiplier);
                canvas.renderAll();
                canvas.calcOffset();
            }
     return canvas.toDataURL();
   }
   );

Es ist nicht eine große Sache mit den Rationen unterscheiden sich dann 1:1, die Sie benötigen, um zu berechnen, Mehrspieleraction für die Höhe als gut, leicht zu verstehen-Verhältnis: http://andrew.hedges.name/experiments/aspect_ratio/