0

i'm building a Web app Where the user can create is own image with HTML5 Canvas. (I'm also using Jcanvas).

On Desktop, the Canvas Size is 500x500 (so, it generate images of 500x500 pixels).

On Mobile, the Canvas Size is 300x300, but i still want to generate images with a size of 500x500 pixels.

Right now, i'm out of idea and i can't make it work!

Gustav
  • 79
  • 2
  • 12
  • 1
    Please provide code and things that you've tried. As of right now, this question is too broad. – ndugger Oct 22 '15 at 13:23
  • Since we do not know what your doing, it is hard to answer well. For instance, do you draw on the canvas? Do you allow image's to be uploaded, are you just positioning images like clip art?? – nycynik Oct 22 '15 at 13:28

2 Answers2

2

The width and height attributes of your canvas define how many logical pixels there are in the canvas. This is not the same as the physical pixels, i.e. how many pixels the canvas is using on your screen. You can control that with css. So you can do something like this:

<canvas style="width: 300px; height: 300px" width=500 height=500> </canvas>

This gives you a canvas that displays a 500x500 image in a 300x300 area

Gio
  • 841
  • 1
  • 5
  • 11
0

In order to scale up, without it looking bad, you are going to need to create a 500x500 image using the actions the user used to make the image at 300x300. So even though you are only using 300x300 worth of screen space, you want to translate that to a 500x500 size image.

I am assuming that you are using 300x300 for the size, not because of limitations of the mobile devices (they can handle 500x500 images in most cases.)

With this in mind, I would say you should have an off screen canvas (just in memory, does not actually show on the bowser) that you create at 500x500. Then every action that occurs on the 300x300 should also be applied to the 500x500 canvas. When the user clicks save, send the 500px image to the server.

nycynik
  • 7,371
  • 8
  • 62
  • 87