How to create canvas that scales well with browser window resize
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
javascript css3 html5-canvas responsive
asked Nov 19 '18 at 13:14
Orange UncleOrange Uncle
12
add a comment |
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
javascript css3 html5-canvas responsive
asked Nov 19 '18 at 13:14
Orange UncleOrange Uncle
12
Hi, your request is unclear, can you explain better what's the desired behaviour?
– Cristian Traìna
Nov 19 '18 at 13:19
If you look in the image where the width and height is set to 100vmax the dots look stretched. That's my problem. It's perfectly responsive with window sizing but the dots are stretched even when the window is small
– Orange Uncle
Nov 19 '18 at 13:51
add a comment |
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
javascript css3 html5-canvas responsive
asked Nov 19 '18 at 13:14
Orange UncleOrange Uncle
12
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
javascript css3 html5-canvas responsive
javascript css3 html5-canvas responsive
asked Nov 19 '18 at 13:14
Orange UncleOrange Uncle
12
asked Nov 19 '18 at 13:14
Orange UncleOrange Uncle
12
edited Nov 19 '18 at 13:49
Orange Uncle
asked Nov 19 '18 at 13:14
Orange UncleOrange Uncle
12
asked Nov 19 '18 at 13:14
Orange UncleOrange Uncle
12
asked Nov 19 '18 at 13:14
Orange UncleOrange Uncle
12
12
Hi, your request is unclear, can you explain better what's the desired behaviour?
– Cristian Traìna
Nov 19 '18 at 13:19
If you look in the image where the width and height is set to 100vmax the dots look stretched. That's my problem. It's perfectly responsive with window sizing but the dots are stretched even when the window is small
– Orange Uncle
Nov 19 '18 at 13:51
add a comment |
Hi, your request is unclear, can you explain better what's the desired behaviour?
– Cristian Traìna
Nov 19 '18 at 13:19
If you look in the image where the width and height is set to 100vmax the dots look stretched. That's my problem. It's perfectly responsive with window sizing but the dots are stretched even when the window is small
– Orange Uncle
Nov 19 '18 at 13:51
Hi, your request is unclear, can you explain better what's the desired behaviour?
– Cristian Traìna
Nov 19 '18 at 13:19
Hi, your request is unclear, can you explain better what's the desired behaviour?
– Cristian Traìna
Nov 19 '18 at 13:19
If you look in the image where the width and height is set to 100vmax the dots look stretched. That's my problem. It's perfectly responsive with window sizing but the dots are stretched even when the window is small
– Orange Uncle
Nov 19 '18 at 13:51
If you look in the image where the width and height is set to 100vmax the dots look stretched. That's my problem. It's perfectly responsive with window sizing but the dots are stretched even when the window is small
– Orange Uncle
Nov 19 '18 at 13:51
add a comment |
1 Answer
1
active
oldest
votes
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
answered Nov 19 '18 at 19:40
Studio KonKonStudio KonKon
441210
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375453%2fhow-to-create-canvas-that-scales-well-with-browser-window-resize%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Nov 19 '18 at 19:40
Studio KonKonStudio KonKon
441210
add a comment |
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
answered Nov 19 '18 at 19:40
Studio KonKonStudio KonKon
441210
add a comment |
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
answered Nov 19 '18 at 19:40
Studio KonKonStudio KonKon
441210
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
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>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>answered Nov 19 '18 at 19:40
Studio KonKonStudio KonKon
441210
answered Nov 19 '18 at 19:40
Studio KonKonStudio KonKon
441210
answered Nov 19 '18 at 19:40
Studio KonKonStudio KonKon
441210
answered Nov 19 '18 at 19:40
Studio KonKonStudio KonKon
441210
441210
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375453%2fhow-to-create-canvas-that-scales-well-with-browser-window-resize%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hi, your request is unclear, can you explain better what's the desired behaviour?
– Cristian Traìna
Nov 19 '18 at 13:19
If you look in the image where the width and height is set to 100vmax the dots look stretched. That's my problem. It's perfectly responsive with window sizing but the dots are stretched even when the window is small
– Orange Uncle
Nov 19 '18 at 13:51