Argthtjtr

I can't seem to get my canvas to be perfectly responsive.
Using 100% or 100vmax for height and width makes it responsive but it looses clarity.

The center of the canvas seems to be at the bottom of the page as if the canvas stretches beyond the screen

canvas when width is set to 100% or 100vmax

Canvas when width is set through javaScript NOT RESPONSIVE

You'll need to know the aspect ratio of the canvas to do this. You can't simply apply 100% width and height as that will stretch to 100% width and 100% height of the body.

Example:

Lets say I have a Canvas with the dimensions of 864 x 576 and I want it to be responsive to the full body.

Find the percentage/ratio of the canvas. To do this you can do it manually or through JavaScript. In this example lets do it manually for a non-changing image.

ratio = width / height * 100

So here our ratio will be ratio = 864 / 576 * 100 that would be 150% (as in 1.5:1 or 3:2)

We now add the styles using the viewport height vh.

canvas

{

  display: block;

  margin: auto;

  width: 150vh;

  height: 100vh;

}

Now one problem remains. What if the window width is smaller than the canvas? Okay, we create a CSS media query and do the opposite of what we've done.

ratio = (height / width) * 100

So here our ratio will now be ratio = 576 / 864 * 100 that would be 66.66% (as in 0.66:1 or 7:10)

We need to use the viewport width now for the canvas width and height. width is always 100vh.

@media (max-width: 150vh)

{

  canvas

  {

    width: 100vw;

    height: 66.66vw;

  }

}

The max-width media query needs to be equal to the canvas width, which is 150vh in this example.

Take a look at the code: https://codepen.io/StudioKonKon/pen/oQobaa

var image = "https://res.cloudinary.com/studiokonkon/image/upload/v1541450918/sample.jpg";



var canvas = document.getElementById("canvas"),

    ctx = canvas.getContext("2d");



canvas.width = 864;

canvas.height = 576;





var background = new Image();

background.src = image;



// Make sure the image is loaded first otherwise nothing will draw.

background.onload = function()

{

    ctx.drawImage(background,0,0);   

}

body { margin: 0; padding: 0; background: #000; }



.mycanvas

{

  display: block;

  margin: auto;

  width: 150vh;

  height: 100vh;

}



@media (max-width: 150vh)

{

  .mycanvas

  {

    width: 100vw;

    height: 66.66vw;

  }

}

<canvas id="canvas" class="mycanvas"></canvas>

Please be aware support of the vh and vw units are only supported in the latest browsers and assuming you don't care about Internet Explorer.

https://caniuse.com/#feat=viewport-units