Ich versuche, die Leinwand für jede Auflösung anzupassen, also benutze ich zuerst CSS und setze für jede Auflösung einen Medienbildschirm.

@media screen and (min-width: 320px) {
  #c {   -webkit-transform : scale(0.38);
-webkit-transform-origin : 0 0; }

https: //jsfiddle.net/qj3oyzs8

Es funktioniert für mich, aber alle Objekte ziehen, ändern oder drehen sich nicht richtig. Eine Lösung ist das Anwenden von zoomOut und zoomIn, zB:

http: //jsfiddle.net/Q3TMA/662

etzt brauche ich Hilfe, um zu wissen, wie die Aufnahmeauflösung für das Öffnen der Leinwand im Browser richtig skaliert wir

BEARBEITE

function screencan() {
   var widthscrencan = (window.innerWidth > 0) ? window.innerWidth : screen.width;

/*

In if has to have the same scale the css
@media screen and (min-width: 320px) {
  #c {   -webkit-transform : scale(0.38);
-webkit-transform-origin : 0 0; }
}


*/
    if(widthscrencan <= 360 ) {
           // Zoom Out


 function zoomOut() {
        // TODO limit max cavas zoom out

        canvasScale = canvasScale / SCALE_FACTOR;

        canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
        canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

        var objects = canvas.getObjects();
        for (var i in objects) {
            var scaleX = objects[i].scaleX;
            var scaleY = objects[i].scaleY;
            var left = objects[i].left;
            var top = objects[i].top;

            var tempScaleX = scaleX * (1 / SCALE_FACTOR);
            var tempScaleY = scaleY * (1 / SCALE_FACTOR);
            var tempLeft = left * (1 / SCALE_FACTOR);
            var tempTop = top * (1 / SCALE_FACTOR);

            objects[i].scaleX = tempScaleX;
            objects[i].scaleY = tempScaleY;
            objects[i].left = tempLeft;
            objects[i].top = tempTop;

            objects[i].setCoords();
        }

        canvas.renderAll();        
    }

    }               
 }
 window.onload = screencan;

Es funktioniert nicht

Danke für jede Hilfe