Large(5977x8340) canvas not showing on ios

I am trying to display a canvas size 5977x8340 on a page and it is showing correctly on desktop and android but not showing on iPhone(safari,chrome). I have tried with less size like 854x1192 and it's working fine.
I have to show canvas with 5977 x 8340 size in iPhone as well. Please help me where i am doing wrong.

asked Jan 2 at 12:18

Rav Sa

Please share some code examples

– Carlos Martins
Jan 2 at 12:23

var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); canvas.width = 5977; canvas.height = 8340; // Create gradient var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); This is sample code where i am passing height and width like above

– Rav Sa
Jan 2 at 12:31

Try to use document.body.getBoundingClientRect().width insted of canvas.width let me know if you get error on the log

– Carlos Martins
Jan 2 at 12:49

ex. code codepen.io/anon/pen/MZrvJE

– Rav Sa
Jan 2 at 13:10

1

Size is fixed , i can't use getBoundingClientRect

– Rav Sa
Jan 2 at 13:12

add a comment |

asked Jan 2 at 12:18

Rav Sa

Please share some code examples

– Carlos Martins
Jan 2 at 12:23

var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); canvas.width = 5977; canvas.height = 8340; // Create gradient var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); This is sample code where i am passing height and width like above

– Rav Sa
Jan 2 at 12:31

Try to use document.body.getBoundingClientRect().width insted of canvas.width let me know if you get error on the log

– Carlos Martins
Jan 2 at 12:49

ex. code codepen.io/anon/pen/MZrvJE

– Rav Sa
Jan 2 at 13:10

1

Size is fixed , i can't use getBoundingClientRect

– Rav Sa
Jan 2 at 13:12

add a comment |

asked Jan 2 at 12:18

Rav Sa

javascript jquery iphone html5 canvas

asked Jan 2 at 12:18

Rav Sa

asked Jan 2 at 12:18

Rav Sa

asked Jan 2 at 12:18

Rav Sa

asked Jan 2 at 12:18

Rav Sa

asked Jan 2 at 12:18

Rav Sa

Please share some code examples

– Carlos Martins
Jan 2 at 12:23

var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); canvas.width = 5977; canvas.height = 8340; // Create gradient var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); This is sample code where i am passing height and width like above

– Rav Sa
Jan 2 at 12:31

Try to use document.body.getBoundingClientRect().width insted of canvas.width let me know if you get error on the log

– Carlos Martins
Jan 2 at 12:49

ex. code codepen.io/anon/pen/MZrvJE

– Rav Sa
Jan 2 at 13:10

1

Size is fixed , i can't use getBoundingClientRect

– Rav Sa
Jan 2 at 13:12

add a comment |

Please share some code examples

– Carlos Martins
Jan 2 at 12:23

var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); canvas.width = 5977; canvas.height = 8340; // Create gradient var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); This is sample code where i am passing height and width like above

– Rav Sa
Jan 2 at 12:31

Try to use document.body.getBoundingClientRect().width insted of canvas.width let me know if you get error on the log

– Carlos Martins
Jan 2 at 12:49

ex. code codepen.io/anon/pen/MZrvJE

– Rav Sa
Jan 2 at 13:10

1

Size is fixed , i can't use getBoundingClientRect

– Rav Sa
Jan 2 at 13:12

Please share some code examples

– Carlos Martins
Jan 2 at 12:23

var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); canvas.width = 5977; canvas.height = 8340; // Create gradient var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); This is sample code where i am passing height and width like above

– Rav Sa
Jan 2 at 12:31

Try to use document.body.getBoundingClientRect().width insted of canvas.width let me know if you get error on the log

– Carlos Martins
Jan 2 at 12:49

ex. code codepen.io/anon/pen/MZrvJE

– Rav Sa
Jan 2 at 13:10

Size is fixed , i can't use getBoundingClientRect

– Rav Sa
Jan 2 at 13:12

add a comment |

0

active

oldest

votes

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54006246%2flarge5977x8340-canvas-not-showing-on-ios%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu