question-character not displayed correctly on canvas in webpage

elenar

Hi I have problem with my live2d animation not displaying properly on canvas. It seems bigger than the canvas so I can see only part of character. Resizing canvas resizes animation as well. Is there an function to scale model in html without changing size of canvas? Or maybe I can somwhow set the model to be alweys scaled?

my html document

< !DOCTYPE html>
< html>
< head>
< script type="text/javascript" src="device.min.js">
< script type="text/javascript" src="bundle.js">
< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
< /head>
< body>
< div style="width:954px;height:715px;">
< canvas id="char" >
< /div>
< style>
#char{
position: absolute;
top: 0px;
left: 318px;
width: 318px;
height: 715px;
z-index: 3;
}
< /style>
< script language="JAVASCRIPT">
var modelUrl="./models/alma/almapos1.model.json";
console.log(modelUrl);
loadlive2d("char", modelUrl);
< /script>
< /body>
< /body>
< /html>

this is my model and how it should be


and here is what i get on my page



and model size is 636x1430 not sure if that has anything to do with the problem