I'm working with PaperJS. When I resize the browser window, I ask the canvas to redraw. However, the graphics do not re-center, as I draw the graphics from view.center:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/paper-full.min.js"></script>
<script type="text/paperscript" canvas="paperjs-canvas">
var center = new Path.Circle(view.center, 450);
center.fillColor = '#000000';
function onResize(event) {
// redraw canvas
paper.view.draw();
}
</script>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden; /* avoid Mac / Chrome overscroll */
}
#paperjs-canvas {
width: 100%;
height: 100%;
background-color: #D0E7D1;
}
</style>
</head>
<body>
<canvas id="paperjs-canvas" class="off" data-paper-resize="true"></canvas>
</body>
</html>
I checked from Developer Console that the resize function is called every time I resize the browser, but the paper.view.draw(); does not re-align the graphics.
What did I miss?
Running on Google Chrome 41, Mac OS X 10.10.2
View.center is just a regular coordinate. There's nothing special about it that keeps an object positioned there locked at the "center" of the canvas.
If you want to keep the same point as view.center after resizing the canvas, you can use view.scrollBy(point) to transform the coordinate system. Just keep in mind that the point [0,0] may no longer correspond to the top-left of the canvas.
var center = new Path.Circle(view.center, 240);
center.fillColor = '#000000';
var lastPoint = view.center;
function onResize(event) {
view.scrollBy(lastPoint.subtract(view.center));
lastPoint = view.center;
}