Resize canvas relative to parent element

[Callum]

I have the following working solution, but rendering seems choppy when resizing:

var canvas = view.canvas;

var parent = canvas.parentNode;

function fitContainer() {

    canvas.width = parent.offsetWidth;

    canvas.height = parent.offsetHeight;

    view.setViewSize(canvas.width, canvas.height);

}

fitContainer();

window.onresize = fitContainer;

Doesn't seem as smooth as Paper's built-in automatic resize. Is there a better solution for this?

Would be great to see something like this implemented.

Thanks

[Peter Herdenborg]

Hi Callum,

I'm not sure, but I would have guessed that calling setViewSize() sets canvas.width and canvas.height for you. Maybe setting them manually before calling setViewSize() has a negative impact on the rendering? On http://paperjs.org/reference/view (where setViewSize() is not documented), it says "viewSize: The size of the view canvas. Changing the view's size will resize it's underlying canvas.".

Best,
Peter

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Callum]

Thanks Peter - that seemed to work well. Here's my code:

https://dl.dropbox.com/u/790162/animation.html

[Callum]

After looking over my code, it seems the choppiness is caused by a missed calculation in my code. Here's how my code works:

1. A number of objects representing points that move randomly inside a box are instantiated
2. A random destination within the bounding box is given for the point to travel to
3. Each time it is resized, the bounding box for each point is recalculated based on the width/height of the canvas

I think the problem is that the destination points aren't scaled along with the bounding box, causing them to behave erratically.

For example: if I have a box that is 1000x400 pixels, with a point within at 500x300px, how can I recalculate the point's position to correspond with a box that has been resized to 750x300 pixels?

Here's the full source: http://dpaste.com/1027174/

I hope this makes sense, and I would truly appreciate any help.

Thanks,

Callum