Paperjs: Canvas Höhe und Breite wird bei der Fenstergröße geändert. Wie verhindere ich die Änderung?

Question

Ich habe eine einfache Leinwand mit Papierjs konfiguriert. Bei der Größenanpassung ändert sich die Höhe und Breite des Fenster-Canvas. Danke Leute im Voraus.

HTML

<canvas id="myCanvas" height="800" width="1000"></canvas> 

JS

var InIt = function() { 
    var canvas = document.getElementById('myCanvas'); 
    console.log(canvas); 
    paper.setup(canvas); 
    var path = new paper.Path(); 
    path.strokeColor = 'black'; 
    var start = new paper.Point(100, 100); 
    path.moveTo(start); 
    path.lineTo(start.add([200, -50])); 
    paper.view.draw(); 
} 

window.onload = InIt; 

window.onresize=InIt; 

Screenshot

Schirm 1

Schirm 2

Sie können die Höhe und Breite Unterschiede auf Resize sehen.

Answer 1

Do not paper.setup() in der Init-Funktion. Führen Sie paper.setup() einmal aus. Etwas wie das folgende (meine test.html Datei):

<script src="./dist/paper-core.js"></script> 

<canvas id="canvas" height="800" width="1000"></canvas> 

<script> 
var canvas = document.getElementById("canvas"); 
paper.setup(canvas); 
var init = function() { 
    console.log(canvas); 
    var path = new paper.Path(); 
    path.strokeColor = 'black'; 
    var start = new paper.Point(100,100); 
    path.moveTo(start); 
    path.lineTo(start.add([200, -50])); 
    paper.view.draw(); 
} 
window.onload = init; 
window.onresize = init; 
</script>