Resizing the canvas

[Younesse Kaddar]

Hi, I'd like to resize my canvas element by pressing a button. To do
that, I've tried to set, using Javascript, the canvas.height and the
canvas.width to the desired size. But, even though the canvas object
is actually resized in HTML, it seems there's a graphical bug which
prevent the paperscript view from drop to the canvas' size.

[Younesse Kaddar]

Sorry, I haven't posted my message on purpose. It isn't finished. I'd
just add my code, to help you:

var widthPage = document.getElementById("page").offsetWidth;

document.getElementById("canvas").width= widthPage;
document.getElementById("canvas").height=widthPage;

The canvas get resized in HTML, but in the view, my instances look
like they are "crashing" into the sides of the old canvas size.
Thank you very much in advance!

[Zack Grossbart]

Hi Younesse,

Resizing the canvas is the first step, but you also have to tell Paper
to resize the view or it will scale strangely within the canvas. Try
this:

view.viewSize = [<your new width>, <your new height>];

Cheers,
Zack

[Younesse Kaddar]

Thank you very much for this "flash" answer! :)
But, Can I have access to this string from Javascript? Because the
function which sets the new size of the canvas is called from
Javascript, and would like to do it (resizing the canvas and the view)
at once.

[Zack Grossbart]

You can get the view object in JavaScript from the Paper objects.
Take a look at the using JavaScript tutorial here:

http://paperjs.org/tutorials/getting-started/using-javascript-directly/#setting-up-a-scope

-Zack

[Younesse Kaddar]

Thank you very much! It seems to work with that:

document.getElementById("canvas").width= widthPage;
document.getElementById("canvas").height=widthPage;

paper.view.viewSize = [widthPage, widthPage];

Thank you tremendously!

On 31 jan, 21:47, Zack Grossbart <zgrossb...@gmail.com> wrote:
> You can get the view object in JavaScript from the Paper objects.
> Take a look at the using JavaScript tutorial here:
>

>    http://paperjs.org/tutorials/getting-started/using-javascript-directl...