Canvas drawing disappears on zoom in/out
-1
I have a HTML canvas in my application. When user draws something on that canvas and performs zoom in/out, it clears the drawing from that canvas.
var wrapper = document.getElementById("signature-pad");
var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas,
backgroundColor: 'rgb(255, 255, 255)'
);
function resizeCanvas()
var ratio = Math.max(window.devicePixelRatio
window.onresize = resizeCanvas;
resizeCanvas();
Is there a way present which can keep that drawing as it even when we perform zoom in-out or resize
I tried the in-memory part, but it reduces the quality of drawing
javascript jquery html canvas
edited Nov 12 '18 at 13:48
Rory McCrossan
242k29206245
asked Nov 12 '18 at 13:46
omkar patadeomkar patade
53572040
add a comment |
-1
I have a HTML canvas in my application. When user draws something on that canvas and performs zoom in/out, it clears the drawing from that canvas.
var wrapper = document.getElementById("signature-pad");
var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas,
backgroundColor: 'rgb(255, 255, 255)'
);
function resizeCanvas()
var ratio = Math.max(window.devicePixelRatio
window.onresize = resizeCanvas;
resizeCanvas();
Is there a way present which can keep that drawing as it even when we perform zoom in-out or resize
I tried the in-memory part, but it reduces the quality of drawing
javascript jquery html canvas
edited Nov 12 '18 at 13:48
Rory McCrossan
242k29206245
asked Nov 12 '18 at 13:46
omkar patadeomkar patade
53572040
Changing the width and height of the canvas element makes the drawing disappear. Can you set the width and height using css rules instead?
– James
Nov 12 '18 at 13:57
Setting canvas.width or canvas.height will clear the buffer. You need to copy over the image data.
– Lars-Kristian Johansen
Nov 12 '18 at 13:58
There is no zoom in your code, only resize and it makes a big difference. For a zoom yoy could define the zoom 1, full quality level. For a resize, it's more conplicated... How would you want it to work exactly? Let's say your user starts with a 100 x 100 canvas, makes some drawing on it that fills all the area, the resize to 1000 x 1000. Should all the 1000 x 1000 be filled by a resized copy of the previous drawing, or should only more space be created for the current drawing area? If the former, how do you deal with aspect ratio changes? If the latter how do you deal with shrinking.
– Kaiido
Nov 12 '18 at 14:34
add a comment |
-1
-1
-1
I have a HTML canvas in my application. When user draws something on that canvas and performs zoom in/out, it clears the drawing from that canvas.
var wrapper = document.getElementById("signature-pad");
var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas,
backgroundColor: 'rgb(255, 255, 255)'
);
function resizeCanvas()
var ratio = Math.max(window.devicePixelRatio
window.onresize = resizeCanvas;
resizeCanvas();
Is there a way present which can keep that drawing as it even when we perform zoom in-out or resize
I tried the in-memory part, but it reduces the quality of drawing
javascript jquery html canvas
edited Nov 12 '18 at 13:48
Rory McCrossan
242k29206245
asked Nov 12 '18 at 13:46
omkar patadeomkar patade
53572040
I have a HTML canvas in my application. When user draws something on that canvas and performs zoom in/out, it clears the drawing from that canvas.
var wrapper = document.getElementById("signature-pad");
var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas,
backgroundColor: 'rgb(255, 255, 255)'
);
function resizeCanvas()
var ratio = Math.max(window.devicePixelRatio
window.onresize = resizeCanvas;
resizeCanvas();
Is there a way present which can keep that drawing as it even when we perform zoom in-out or resize
I tried the in-memory part, but it reduces the quality of drawing
javascript jquery html canvas
javascript jquery html canvas
edited Nov 12 '18 at 13:48
Rory McCrossan
242k29206245
asked Nov 12 '18 at 13:46
omkar patadeomkar patade
53572040
edited Nov 12 '18 at 13:48
Rory McCrossan
242k29206245
asked Nov 12 '18 at 13:46
omkar patadeomkar patade
53572040
edited Nov 12 '18 at 13:48
Rory McCrossan
242k29206245
edited Nov 12 '18 at 13:48
Rory McCrossan
242k29206245
edited Nov 12 '18 at 13:48
Rory McCrossan
242k29206245
242k29206245
asked Nov 12 '18 at 13:46
omkar patadeomkar patade
53572040
asked Nov 12 '18 at 13:46
omkar patadeomkar patade
53572040
asked Nov 12 '18 at 13:46
omkar patadeomkar patade
53572040
53572040
Changing the width and height of the canvas element makes the drawing disappear. Can you set the width and height using css rules instead?
– James
Nov 12 '18 at 13:57
Setting canvas.width or canvas.height will clear the buffer. You need to copy over the image data.
– Lars-Kristian Johansen
Nov 12 '18 at 13:58
There is no zoom in your code, only resize and it makes a big difference. For a zoom yoy could define the zoom 1, full quality level. For a resize, it's more conplicated... How would you want it to work exactly? Let's say your user starts with a 100 x 100 canvas, makes some drawing on it that fills all the area, the resize to 1000 x 1000. Should all the 1000 x 1000 be filled by a resized copy of the previous drawing, or should only more space be created for the current drawing area? If the former, how do you deal with aspect ratio changes? If the latter how do you deal with shrinking.
– Kaiido
Nov 12 '18 at 14:34
add a comment |
Changing the width and height of the canvas element makes the drawing disappear. Can you set the width and height using css rules instead?
– James
Nov 12 '18 at 13:57
Setting canvas.width or canvas.height will clear the buffer. You need to copy over the image data.
– Lars-Kristian Johansen
Nov 12 '18 at 13:58
There is no zoom in your code, only resize and it makes a big difference. For a zoom yoy could define the zoom 1, full quality level. For a resize, it's more conplicated... How would you want it to work exactly? Let's say your user starts with a 100 x 100 canvas, makes some drawing on it that fills all the area, the resize to 1000 x 1000. Should all the 1000 x 1000 be filled by a resized copy of the previous drawing, or should only more space be created for the current drawing area? If the former, how do you deal with aspect ratio changes? If the latter how do you deal with shrinking.
– Kaiido
Nov 12 '18 at 14:34
Changing the width and height of the canvas element makes the drawing disappear. Can you set the width and height using css rules instead?
– James
Nov 12 '18 at 13:57
Changing the width and height of the canvas element makes the drawing disappear. Can you set the width and height using css rules instead?
– James
Nov 12 '18 at 13:57
Setting canvas.width or canvas.height will clear the buffer. You need to copy over the image data.
– Lars-Kristian Johansen
Nov 12 '18 at 13:58
Setting canvas.width or canvas.height will clear the buffer. You need to copy over the image data.
– Lars-Kristian Johansen
Nov 12 '18 at 13:58
There is no zoom in your code, only resize and it makes a big difference. For a zoom yoy could define the zoom 1, full quality level. For a resize, it's more conplicated... How would you want it to work exactly? Let's say your user starts with a 100 x 100 canvas, makes some drawing on it that fills all the area, the resize to 1000 x 1000. Should all the 1000 x 1000 be filled by a resized copy of the previous drawing, or should only more space be created for the current drawing area? If the former, how do you deal with aspect ratio changes? If the latter how do you deal with shrinking.
– Kaiido
Nov 12 '18 at 14:34
There is no zoom in your code, only resize and it makes a big difference. For a zoom yoy could define the zoom 1, full quality level. For a resize, it's more conplicated... How would you want it to work exactly? Let's say your user starts with a 100 x 100 canvas, makes some drawing on it that fills all the area, the resize to 1000 x 1000. Should all the 1000 x 1000 be filled by a resized copy of the previous drawing, or should only more space be created for the current drawing area? If the former, how do you deal with aspect ratio changes? If the latter how do you deal with shrinking.
– Kaiido
Nov 12 '18 at 14:34
add a comment |
1 Answer
1
active
oldest
votes
0
Reading an image from the canvas before resizing it and writing the image back after can help.
var data = signaturePad.toDataURL();
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear();
signaturePad.fromDataURL(data);
But it doesn't work properly when we zoom out and tries to zoom in back in signature pad
answered Nov 13 '18 at 7:02
omkar patadeomkar patade
53572040
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
);
);
draft saved
draft discarded
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%2f53263526%2fcanvas-drawing-disappears-on-zoom-in-out%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
0
Reading an image from the canvas before resizing it and writing the image back after can help.
var data = signaturePad.toDataURL();
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear();
signaturePad.fromDataURL(data);
But it doesn't work properly when we zoom out and tries to zoom in back in signature pad
answered Nov 13 '18 at 7:02
omkar patadeomkar patade
53572040
add a comment |
0
Reading an image from the canvas before resizing it and writing the image back after can help.
var data = signaturePad.toDataURL();
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear();
signaturePad.fromDataURL(data);
But it doesn't work properly when we zoom out and tries to zoom in back in signature pad
answered Nov 13 '18 at 7:02
omkar patadeomkar patade
53572040
add a comment |
0
0
0
Reading an image from the canvas before resizing it and writing the image back after can help.
var data = signaturePad.toDataURL();
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear();
signaturePad.fromDataURL(data);
But it doesn't work properly when we zoom out and tries to zoom in back in signature pad
answered Nov 13 '18 at 7:02
omkar patadeomkar patade
53572040
Reading an image from the canvas before resizing it and writing the image back after can help.
var data = signaturePad.toDataURL();
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear();
signaturePad.fromDataURL(data);
But it doesn't work properly when we zoom out and tries to zoom in back in signature pad
answered Nov 13 '18 at 7:02
omkar patadeomkar patade
53572040
answered Nov 13 '18 at 7:02
omkar patadeomkar patade
53572040
answered Nov 13 '18 at 7:02
omkar patadeomkar patade
53572040
answered Nov 13 '18 at 7:02
omkar patadeomkar patade
53572040
53572040
add a comment |
add a comment |
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');
);
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%2f53263526%2fcanvas-drawing-disappears-on-zoom-in-out%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
Changing the width and height of the canvas element makes the drawing disappear. Can you set the width and height using css rules instead?
– James
Nov 12 '18 at 13:57
Setting canvas.width or canvas.height will clear the buffer. You need to copy over the image data.
– Lars-Kristian Johansen
Nov 12 '18 at 13:58
There is no zoom in your code, only resize and it makes a big difference. For a zoom yoy could define the zoom 1, full quality level. For a resize, it's more conplicated... How would you want it to work exactly? Let's say your user starts with a 100 x 100 canvas, makes some drawing on it that fills all the area, the resize to 1000 x 1000. Should all the 1000 x 1000 be filled by a resized copy of the previous drawing, or should only more space be created for the current drawing area? If the former, how do you deal with aspect ratio changes? If the latter how do you deal with shrinking.
– Kaiido
Nov 12 '18 at 14:34