Paperjs: La hauteur et la largeur du canevas sont modifiées lors du redimensionnement de la fenêtre. Comment empêcher le changement?

Question

J'ai une toile simple avec des paperjs configurés. tout en redimensionnant la hauteur et la largeur de la fenêtre de la fenêtre change. Merci les gens à l'avance.

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

écran 1

écran 2

Vous pouvez voir la hauteur et la largeur des différences sur Redimensionner.

Answer 1

Ne faites pas paper.setup() dans la fonction init. Exécutez paper.setup() une fois. Quelque chose comme le suivant (mon fichier test.html):

<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>