Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Please limit one question/topic per post.
Please provide the following details depending on types of question

▼ For question regarding Editor, please provide:
- Live2D Software Version: (e.g. Cubism Editor 3.1.02, Euclid Editor 1.2.02)
- OS & Version: (e.g. Windows 10, macOS HighSierra)
- PC Model: (e.g. MacBookPro 2017)
- Graphics Specifications: (e.g. GeForce GTX 950M)
- Memory: (e.g. 8GB)
- Illustration Software used: (e.g. Photoshop, ClipStudio, SAI)
- Attach screenshot or capture video to show your problem:
▼ For question regarding SDK, please provide:
- For us to reproduce the issue you wish to inquire about, please provide either a minimum project file which has the issue. or specific instructions on how to reproduce the issue.
- Types and version of Cubism SDK you are using.
▼ For question regarding Cubism Software License,
For issues related to purchasing, your order, license key, and subscription, please contact us via contact form:

Question - canvas size and scaling

How do I make the canvas fill the entire window width & height and keep the live2d model to it's original proportion?

I try adjusting

canvas.width = window.innerWidth
canvas.height= window.innerHeight = window.innerWidth + "px"; window.innerHeight+ "px";

The result keep coming out distorted.

I also don't understand this matrix:

var s = 2.0 / live2DModel.getCanvasWidth();
var matrix4x4 = [ s,0,0,0 , 0,-s,0,0 , 0,0,1,0 , -1.0,1,0,1 ];

Can someone please explain. Thank you in advance.


  • The circles were originally perfect circles, but in the canvas they are distorted.
    How do I adjust the matrix4x4, so that the width would fit into the screen, and the height would adjust proportionally to the width ???

    Thank you
  • I don't want the original proportion of the live2d .moc to change.

    So if the width changes by 0.5, the height would also change by 0.5 ;
    & if the width changes by 0.25, the height would also change by 0.25.

    So that's what I want. Help please anyone?
  • I am struggling with this. Now I got:

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;


    I know that the trick lies in Sy
    var matrix4x4 = [ Sx,0,0,0 , 0,-Sy,0,0 , 0,0,1,0 , -1.0,1,0,1 ];

    But what should Sy be ? Help me on this please.
  • There is a way that can be easily resized .

    [ Function ]
    setWidth(scale) -> Scale change
    setCenterPosition(x,y) -> Position change

    [ Sample Code ]
    var height = live2DModel.getCanvasHeight();
    var width = live2DModel.getCanvasWidth();
    var mmat = new L2DModelMatrix(width, height);
    mmat.setCenterPosition(0.0, 0.0);
    Please try to here as a reference ( This page is Japanese )
  • Uncaught ReferenceError: L2DModelMatrix is not defined

    I got this error :(
  • edited April 2016
    I'm not an expert, but in Live2D>Framework, you should have a bunch of .cs files. I believe that can be solved if you add in all of the scripts relevant to L2D Matrixes from that file (or simply all of the scripts altogether), since the error is like the program saying "Hey, what is a L2DModelMatrix? I need to know what it is!". So you need to add in the .cs which contains the definition of what L2DModelMatrix is, thus telling it "Yes, this what a L2DModelMatrix is".
  • Hi, Rus .
    Did you see even once the link page in my comment !?
    There is a code that references Live2DFramework.js to HTML file :s
  • Alright. But same problem persists.
    PS: my canvas isn't square

  • I tried
    var mmat = new L2DModelMatrix(height, height);
    canvas.width = window.innerHeight;
    canvas.height = window.innerHeight;

    The result is still distorted :(
  • never mind. All good now.

    However I did have to tweek the Live2DFramework.js

    Here's was my solution for anyone who's interested:

    Live2DFramework.js - line 850-ish
    L2DModelMatrix.prototype.setWidth        = function(w/*float*/)
        var scaleX = w / this.width;
        var scaleY = -w / this.height;
        this.scale(scaleX, scaleY);
        var mmat = new L2DModelMatrix(window.innerWidth*3.5, window.innerHeight*3.5);
        mmat.setCenterPosition(0.0, 0.0);
    Apparently the ratio of live2DModel.getCanvasWidth() / live2DModel.getCanvasHeight() does not equal window.innerWidth / window.innerHeight
  • OK , try this code .
    offsetX is change value .
    var height = live2DModel.getCanvasHeight();
    var width = live2DModel.getCanvasWidth();
    var mmat = new L2DModelMatrix(width, height);
    // mmat.setWidth(2.0);
    var scaleX = 2.0 / width;
    var scaleY = -scaleX;
    var offsetX = 1.4;
    mmat.scale(scaleX * offsetX, scaleY);
    mmat.setCenterPosition(0.0, 0.0);
  • Ok. This is good. Now I don't need to tweek the live2d one anymore :)
  • I did realize a quality problem. (see picture)

    The quality is good on Live2d Viewer, but the quality is not good on browser.

    I noticed that the constant 2 is always used
    // mmat.setWidth(2.0);
    var scaleX = 2.0 / width;
    Does this constant 2 have anything to do with the reduced quality on browsers?
    & How do I fix this quality problem?

    Thank you
  • I found a temporary fix for the quality issue:
    			canvas.width = window.innerWidth*2;
    			canvas.height = window.innerHeight*2;	
    However I am still curious to know, what the constant 2 actually does? Is the quality really halved during the process of loading l2d into web browser?
  • constant value is 2 because Oprhographic projection .

    And normalized to the easy-to-use value in WebGL and OpenGL .

    LeftBottom(0, 0) → (-1, -1)
    RightTop(413, 310) → (1, 1)

Sign In or Register to comment.