0

If I make several scripts with Paperscript coding drawings in a random scale, be it lines of 0.1 length or 1000 length (script var value!), then how do I proceed making these several scripts viewable in several canvases that have the same size?

(Envision for example a webpage that shows several drawings in a same size html-canvas-box, all having a different drawing, each more zoomed in on an object, all coded with the correct values in Paperscript.)

In my case the canvas is 100% by 57.7% set in a div. I want the drawings I make in whatever scale to show up there with as a maximum of extra in my paperscript maybe setting the view height and width, or adjusting the scale.

Right now I am having a hard time to not have my view behave strangely.

When I use data-paper-resize="true", resize="true" or nothing at all in the <canvas> as an attribute, then what I am showing in my view doesn't remain the same in different browser sizes.

Is it that I used percentage for the canvas? Should I define something in my paperscript? Can I do this outside of the drawing script with some jQuery?

EDIT

When I change my CSS for the canvas from % to em my drawing is solid, like the examples on the site of paperjs itself. But also like on the site of paperjs itself, they are not responsive. Meaning you can adjust your browsers size and the canvas takes up the same amount of pixels on the screen. Not sure how this will work for me in the long run, like say with mobile devices...

It does cut out the strange behavior. Any ideas on making a fully responsive paperscript canvas that behaves normal?

Code-MonKy
  • 2,026
  • 2
  • 14
  • 27
  • Can you provide some additional explanation? It's not clear what you are trying to do. I can read it as 1) trying to create a line 1" long in canvases of varying sizes or 2) want a line to be a specific percentage of the canvas' size or 3) you want a single line to appear in multiple canvases but be the same size in each of them. – bmacnaughton Oct 31 '15 at 19:41
  • 3) seems a given, I suppose 2). I want a line of 1 inch or 1 kilometer to show up in its corresponding 'always-the-same-size-canvas-box', and when I make the screen half its size, it should stil be there, proportionally the same. I tried to make it more clear in my story above and also added an example. – Code-MonKy Oct 31 '15 at 21:28
  • I'm sorry, but this still isn't clear to me. Maybe if you show a bit about what you're doing with sketch.paperjs.org or jsfiddle then I might be able to help. I'm confused how "always-the-same-size-canvas-box" and "make the screen half its size" and "be proportionally the same" play together. When you resize the screen the do you want the canvas to resize or stay the same size? Changing the CSS display size doesn't change the canvas size which is defined in pixels and is fixed unless you change it. – bmacnaughton Nov 01 '15 at 01:29
  • Yes exactly it's defined in pixels. Is there a way to make it em or %? Probably not, but I was hoping for a way around this somehow – Code-MonKy Dec 27 '15 at 16:55
  • Again, please post a sketch (sketch.paperjs.org) or some code so people know what question to answer. But you can define the canvas size using em or %. You just can't do so directly - here is a question that shows how to get the font size for an element: https://stackoverflow.com/questions/15195209/how-to-get-font-size-in-html. You can then use that to calculate the pixel size to set the canvas to. But I'm still not sure I really understand the issue. – bmacnaughton Dec 27 '15 at 17:23
  • Thanks, that pretty much answers the question :) – Code-MonKy Dec 28 '15 at 16:51

0 Answers0