Menu
I'm trying out Paper.js for fun, but it seems I'm already stuck at the very start.
Adding resize="true" to the canvas tag is supposed to make the element as high and wide as the browser window. However, doing that results in some rather strange behavior.
I expected the canvas to adjust itself to the viewport right after loading the page, but it didn't do so, which is why I initially thought it didn't resize at all. What actually happens, though, is even more bizarre: The canvas starts out at its default size of 300x150, and when I resize the viewport, it grows - slowly, but indefinitely.
For the record, I've tried using data-paper-resize="true" or just resize instead, or using Chrome instead of Firefox - all to no avail.
I'm not expecting an answer if this problem is caused by some inexplicably weird setup on my end. I am wondering, however, if the problem is common (or even known to exist at all) and has known causes and solutions.
Here's the code I'm using:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="paper-full.min.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var path = new Path();
path.strokeColor = 'black';
path.moveTo(new Point(120, 120));
path.lineTo(new Point(500, 500));
</script>
</head>
<body>
<canvas id="myCanvas" style="border: 1px dotted red;" resize="true"></canvas>
</body>
</html>
642
Set the Size with CSSto set the canvas's width and height both to 100%. We also set the position to absolute and top , left , right , and bottom to 0 to make the canvas fill the screen. Also, we make the html and body elements fill the screen by setting the width and height to 100%.
You can change the screen size of any other device type by selecting the base page (icon that looks like a monitor or phone) in the Outline palette, and then looking to the Properties palette, where you'll see inputs to change the width and height.
To Resize the Canvas by Dragging: In Edit mode, select the Resize Canvas tool from the Toolbar at the top of the panel. Position your cursor over the edge or corner of your image until it changes into a double-pointed arrow. Drag the canvas' border to the desired size.
Resizing the canvas on the fly is quite easy. To do it, simply set the width and height properties of the Canvas object, and then redraw the canvas contents: Canvas . width = 600 ; Canvas .
Add the following CSS to your project:
<style type="text/css"> html, body { margin: 0; overflow: hidden; height: 100%; } /* Scale canvas with resize attribute to full size */ canvas[resize] { width: 100%; height: 100%; } </style> I opened an issue for this on Github and it seems that this is a bug introduced in 0.9.22. @Skalkaz pointed me this question.
Here is the pending issue: https://github.com/paperjs/paper.js/issues/662.
You can also downgrade to 0.9.21 while waiting for a patch.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
