javascripthtmlcanvashtml5-canvasjcanvas

HTML5 Canvas on Desktop and Mobile


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!


Solution

  • 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