Why I can't clear a canvas with another empty canvas in HTML5?
4
const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// buffer canvas and screen canvas have same width and height
// draw a circle on buffer canvas
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();
// render to screen canvas (working)
screen.drawImage(buffer, 0, 0);
// clear canvas when click
canvas.addEventListener('click', () => {
context.clearRect(0, 0, buffer.width, buffer.height);
screen.drawImage(buffer, 0, 0); // not working
// only working with `screen.clearRect(0, 0, canvas.width, canvas.height);`
})
Like the code above, when using an empty canvas to clear another canvas, it's not working. (HTML only with <canvas id="canvas"></canvas> tag). Live Demo on https://jsfiddle.net/wjvtzng7/
javascript html html5 canvas html5-canvas
asked Nov 12 '18 at 15:27
sabertazimisabertazimi
324
|
show 2 more comments
4
const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// buffer canvas and screen canvas have same width and height
// draw a circle on buffer canvas
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();
// render to screen canvas (working)
screen.drawImage(buffer, 0, 0);
// clear canvas when click
canvas.addEventListener('click', () => {
context.clearRect(0, 0, buffer.width, buffer.height);
screen.drawImage(buffer, 0, 0); // not working
// only working with `screen.clearRect(0, 0, canvas.width, canvas.height);`
})
Like the code above, when using an empty canvas to clear another canvas, it's not working. (HTML only with <canvas id="canvas"></canvas> tag). Live Demo on https://jsfiddle.net/wjvtzng7/
javascript html html5 canvas html5-canvas
asked Nov 12 '18 at 15:27
sabertazimisabertazimi
324
In javaScript you only get a reference of your objects. if you have 2 of them, you have 2 exact the same object, if you change the one, then you changed the other too. That is the reason why your function not work like you think.
– episch
Nov 12 '18 at 15:33
HTML5 only allow onecanvasinstance?
– sabertazimi
Nov 12 '18 at 15:35
bufferandcanvasrefer to different<canvas>instances in above code
– sabertazimi
Nov 12 '18 at 15:37
No that was not what I meant. I mean in your JavaScript this is const buffer = document.createElement ('canvas'); const canvas = document.getElementById ('canvas'); takes care of the buffer and canvas are both references from the same canvas, all changes to buffer or canvas, directly affect both variables, which is just a reference of the objects in there.
– episch
Nov 12 '18 at 15:38
2
fillRectdoesn't truly clearbufferandcanvas(It works inline 14too).
– sabertazimi
Nov 12 '18 at 15:49
|
show 2 more comments
4
4
4
const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// buffer canvas and screen canvas have same width and height
// draw a circle on buffer canvas
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();
// render to screen canvas (working)
screen.drawImage(buffer, 0, 0);
// clear canvas when click
canvas.addEventListener('click', () => {
context.clearRect(0, 0, buffer.width, buffer.height);
screen.drawImage(buffer, 0, 0); // not working
// only working with `screen.clearRect(0, 0, canvas.width, canvas.height);`
})
Like the code above, when using an empty canvas to clear another canvas, it's not working. (HTML only with <canvas id="canvas"></canvas> tag). Live Demo on https://jsfiddle.net/wjvtzng7/
javascript html html5 canvas html5-canvas
asked Nov 12 '18 at 15:27
sabertazimisabertazimi
324
const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// buffer canvas and screen canvas have same width and height
// draw a circle on buffer canvas
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();
// render to screen canvas (working)
screen.drawImage(buffer, 0, 0);
// clear canvas when click
canvas.addEventListener('click', () => {
context.clearRect(0, 0, buffer.width, buffer.height);
screen.drawImage(buffer, 0, 0); // not working
// only working with `screen.clearRect(0, 0, canvas.width, canvas.height);`
})
Like the code above, when using an empty canvas to clear another canvas, it's not working. (HTML only with <canvas id="canvas"></canvas> tag). Live Demo on https://jsfiddle.net/wjvtzng7/
javascript html html5 canvas html5-canvas
javascript html html5 canvas html5-canvas
asked Nov 12 '18 at 15:27
sabertazimisabertazimi
324
asked Nov 12 '18 at 15:27
sabertazimisabertazimi
324
asked Nov 12 '18 at 15:27
sabertazimisabertazimi
324
asked Nov 12 '18 at 15:27
sabertazimisabertazimi
324
asked Nov 12 '18 at 15:27
sabertazimisabertazimi
324
324
In javaScript you only get a reference of your objects. if you have 2 of them, you have 2 exact the same object, if you change the one, then you changed the other too. That is the reason why your function not work like you think.
– episch
Nov 12 '18 at 15:33
HTML5 only allow onecanvasinstance?
– sabertazimi
Nov 12 '18 at 15:35
bufferandcanvasrefer to different<canvas>instances in above code
– sabertazimi
Nov 12 '18 at 15:37
No that was not what I meant. I mean in your JavaScript this is const buffer = document.createElement ('canvas'); const canvas = document.getElementById ('canvas'); takes care of the buffer and canvas are both references from the same canvas, all changes to buffer or canvas, directly affect both variables, which is just a reference of the objects in there.
– episch
Nov 12 '18 at 15:38
2
fillRectdoesn't truly clearbufferandcanvas(It works inline 14too).
– sabertazimi
Nov 12 '18 at 15:49
|
show 2 more comments
In javaScript you only get a reference of your objects. if you have 2 of them, you have 2 exact the same object, if you change the one, then you changed the other too. That is the reason why your function not work like you think.
– episch
Nov 12 '18 at 15:33
HTML5 only allow onecanvasinstance?
– sabertazimi
Nov 12 '18 at 15:35
bufferandcanvasrefer to different<canvas>instances in above code
– sabertazimi
Nov 12 '18 at 15:37
No that was not what I meant. I mean in your JavaScript this is const buffer = document.createElement ('canvas'); const canvas = document.getElementById ('canvas'); takes care of the buffer and canvas are both references from the same canvas, all changes to buffer or canvas, directly affect both variables, which is just a reference of the objects in there.
– episch
Nov 12 '18 at 15:38
2
fillRectdoesn't truly clearbufferandcanvas(It works inline 14too).
– sabertazimi
Nov 12 '18 at 15:49
In javaScript you only get a reference of your objects. if you have 2 of them, you have 2 exact the same object, if you change the one, then you changed the other too. That is the reason why your function not work like you think.
– episch
Nov 12 '18 at 15:33
In javaScript you only get a reference of your objects. if you have 2 of them, you have 2 exact the same object, if you change the one, then you changed the other too. That is the reason why your function not work like you think.
– episch
Nov 12 '18 at 15:33
HTML5 only allow one
canvas instance?– sabertazimi
Nov 12 '18 at 15:35
HTML5 only allow one
canvas instance?– sabertazimi
Nov 12 '18 at 15:35
buffer and canvas refer to different <canvas> instances in above code– sabertazimi
Nov 12 '18 at 15:37
buffer and canvas refer to different <canvas> instances in above code– sabertazimi
Nov 12 '18 at 15:37
No that was not what I meant. I mean in your JavaScript this is const buffer = document.createElement ('canvas'); const canvas = document.getElementById ('canvas'); takes care of the buffer and canvas are both references from the same canvas, all changes to buffer or canvas, directly affect both variables, which is just a reference of the objects in there.
– episch
Nov 12 '18 at 15:38
No that was not what I meant. I mean in your JavaScript this is const buffer = document.createElement ('canvas'); const canvas = document.getElementById ('canvas'); takes care of the buffer and canvas are both references from the same canvas, all changes to buffer or canvas, directly affect both variables, which is just a reference of the objects in there.
– episch
Nov 12 '18 at 15:38
2
2
fillRect doesn't truly clear buffer and canvas (It works in line 14 too).– sabertazimi
Nov 12 '18 at 15:49
fillRect doesn't truly clear buffer and canvas (It works in line 14 too).– sabertazimi
Nov 12 '18 at 15:49
|
show 2 more comments
1 Answer
1
active
oldest
votes
2
If we write down what you are doing, we get:
One offscreen canvas "buffer", and one visible canvas "screen".
Step by step,
draw a circle on "buffer"
At this stage
- "buffer" represents a circle,
- "screen" represents an empty image (transparent pixels).
draw "buffer" on "screen" canvas
- "buffer" represents a circle,
- "screen" represents a circle
clear "buffer"
- "buffer" represents an empty image (transparent pixels)
- "screen" represents a circle
- "buffer" represents an empty image (transparent pixels)
draw "buffer" on "screen" canvas
- "buffer" represents an empty image (transparent pixels)
- "screen" represents a circle
- "buffer" represents an empty image (transparent pixels)
It seems your confusion comes from the last bullet. But this operation could be rewritten as
- draw an empty image (transparent pixels) to an image that represents a circle.
This indeed does nothing... at least in normal compositing mode source-over where drawing a fully transparent pixel does nothing. See alpha-compositing for more reads about it.
So if you wish to clear your "screen" canvas, you indeed need to clear it using the clearRect() method of the screen context. There are other ways, but don't use them.
Now, I felt I should also point out that there are other compositing modes than source-over available, and that what you expected can actually be done with one of these: copy.
const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// initialize
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
buffer.width = window.innerWidth;
buffer.height = window.innerHeight;
// draw a circle
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();
// render to screen canvas
screen.drawImage(buffer, 0, 0);
// clear canvas when click
canvas.addEventListener('click', () => {
context.clearRect(0, 0, buffer.width, buffer.height);
// only the next drawing operation on screen will be visible
// everything else will get cleared out
screen.globalCompositeOperation = "copy";
screen.drawImage(buffer, 0, 0);
// set back to default mode
screen.globalCompositeOperation = "sourc-over";
})<canvas id="canvas"></canvas>answered Nov 13 '18 at 1:35
KaiidoKaiido
39.7k45899
Awesome! Have learned compositing modes
– sabertazimi
Nov 13 '18 at 10:55
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%2f53265265%2fwhy-i-cant-clear-a-canvas-with-another-empty-canvas-in-html5%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
2
If we write down what you are doing, we get:
One offscreen canvas "buffer", and one visible canvas "screen".
Step by step,
draw a circle on "buffer"
At this stage
- "buffer" represents a circle,
- "screen" represents an empty image (transparent pixels).
draw "buffer" on "screen" canvas
- "buffer" represents a circle,
- "screen" represents a circle
clear "buffer"
- "buffer" represents an empty image (transparent pixels)
- "screen" represents a circle
- "buffer" represents an empty image (transparent pixels)
draw "buffer" on "screen" canvas
- "buffer" represents an empty image (transparent pixels)
- "screen" represents a circle
- "buffer" represents an empty image (transparent pixels)
It seems your confusion comes from the last bullet. But this operation could be rewritten as
- draw an empty image (transparent pixels) to an image that represents a circle.
This indeed does nothing... at least in normal compositing mode source-over where drawing a fully transparent pixel does nothing. See alpha-compositing for more reads about it.
So if you wish to clear your "screen" canvas, you indeed need to clear it using the clearRect() method of the screen context. There are other ways, but don't use them.
Now, I felt I should also point out that there are other compositing modes than source-over available, and that what you expected can actually be done with one of these: copy.
const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// initialize
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
buffer.width = window.innerWidth;
buffer.height = window.innerHeight;
// draw a circle
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();
// render to screen canvas
screen.drawImage(buffer, 0, 0);
// clear canvas when click
canvas.addEventListener('click', () => {
context.clearRect(0, 0, buffer.width, buffer.height);
// only the next drawing operation on screen will be visible
// everything else will get cleared out
screen.globalCompositeOperation = "copy";
screen.drawImage(buffer, 0, 0);
// set back to default mode
screen.globalCompositeOperation = "sourc-over";
})<canvas id="canvas"></canvas>answered Nov 13 '18 at 1:35
KaiidoKaiido
39.7k45899
Awesome! Have learned compositing modes
– sabertazimi
Nov 13 '18 at 10:55
add a comment |
2
If we write down what you are doing, we get:
One offscreen canvas "buffer", and one visible canvas "screen".
Step by step,
draw a circle on "buffer"
At this stage
- "buffer" represents a circle,
- "screen" represents an empty image (transparent pixels).
draw "buffer" on "screen" canvas
- "buffer" represents a circle,
- "screen" represents a circle
clear "buffer"
- "buffer" represents an empty image (transparent pixels)
- "screen" represents a circle
- "buffer" represents an empty image (transparent pixels)
draw "buffer" on "screen" canvas
- "buffer" represents an empty image (transparent pixels)
- "screen" represents a circle
- "buffer" represents an empty image (transparent pixels)
It seems your confusion comes from the last bullet. But this operation could be rewritten as
- draw an empty image (transparent pixels) to an image that represents a circle.
This indeed does nothing... at least in normal compositing mode source-over where drawing a fully transparent pixel does nothing. See alpha-compositing for more reads about it.
So if you wish to clear your "screen" canvas, you indeed need to clear it using the clearRect() method of the screen context. There are other ways, but don't use them.
Now, I felt I should also point out that there are other compositing modes than source-over available, and that what you expected can actually be done with one of these: copy.
const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// initialize
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
buffer.width = window.innerWidth;
buffer.height = window.innerHeight;
// draw a circle
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();
// render to screen canvas
screen.drawImage(buffer, 0, 0);
// clear canvas when click
canvas.addEventListener('click', () => {
context.clearRect(0, 0, buffer.width, buffer.height);
// only the next drawing operation on screen will be visible
// everything else will get cleared out
screen.globalCompositeOperation = "copy";
screen.drawImage(buffer, 0, 0);
// set back to default mode
screen.globalCompositeOperation = "sourc-over";
})<canvas id="canvas"></canvas>answered Nov 13 '18 at 1:35
KaiidoKaiido
39.7k45899
Awesome! Have learned compositing modes
– sabertazimi
Nov 13 '18 at 10:55
add a comment |
2
2
2
If we write down what you are doing, we get:
One offscreen canvas "buffer", and one visible canvas "screen".
Step by step,
draw a circle on "buffer"
At this stage
- "buffer" represents a circle,
- "screen" represents an empty image (transparent pixels).
draw "buffer" on "screen" canvas
- "buffer" represents a circle,
- "screen" represents a circle
clear "buffer"
- "buffer" represents an empty image (transparent pixels)
- "screen" represents a circle
- "buffer" represents an empty image (transparent pixels)
draw "buffer" on "screen" canvas
- "buffer" represents an empty image (transparent pixels)
- "screen" represents a circle
- "buffer" represents an empty image (transparent pixels)
It seems your confusion comes from the last bullet. But this operation could be rewritten as
- draw an empty image (transparent pixels) to an image that represents a circle.
This indeed does nothing... at least in normal compositing mode source-over where drawing a fully transparent pixel does nothing. See alpha-compositing for more reads about it.
So if you wish to clear your "screen" canvas, you indeed need to clear it using the clearRect() method of the screen context. There are other ways, but don't use them.
Now, I felt I should also point out that there are other compositing modes than source-over available, and that what you expected can actually be done with one of these: copy.
const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// initialize
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
buffer.width = window.innerWidth;
buffer.height = window.innerHeight;
// draw a circle
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();
// render to screen canvas
screen.drawImage(buffer, 0, 0);
// clear canvas when click
canvas.addEventListener('click', () => {
context.clearRect(0, 0, buffer.width, buffer.height);
// only the next drawing operation on screen will be visible
// everything else will get cleared out
screen.globalCompositeOperation = "copy";
screen.drawImage(buffer, 0, 0);
// set back to default mode
screen.globalCompositeOperation = "sourc-over";
})<canvas id="canvas"></canvas>answered Nov 13 '18 at 1:35
KaiidoKaiido
39.7k45899
If we write down what you are doing, we get:
One offscreen canvas "buffer", and one visible canvas "screen".
Step by step,
draw a circle on "buffer"
At this stage
- "buffer" represents a circle,
- "screen" represents an empty image (transparent pixels).
draw "buffer" on "screen" canvas
- "buffer" represents a circle,
- "screen" represents a circle
clear "buffer"
- "buffer" represents an empty image (transparent pixels)
- "screen" represents a circle
- "buffer" represents an empty image (transparent pixels)
draw "buffer" on "screen" canvas
- "buffer" represents an empty image (transparent pixels)
- "screen" represents a circle
- "buffer" represents an empty image (transparent pixels)
It seems your confusion comes from the last bullet. But this operation could be rewritten as
- draw an empty image (transparent pixels) to an image that represents a circle.
This indeed does nothing... at least in normal compositing mode source-over where drawing a fully transparent pixel does nothing. See alpha-compositing for more reads about it.
So if you wish to clear your "screen" canvas, you indeed need to clear it using the clearRect() method of the screen context. There are other ways, but don't use them.
Now, I felt I should also point out that there are other compositing modes than source-over available, and that what you expected can actually be done with one of these: copy.
const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// initialize
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
buffer.width = window.innerWidth;
buffer.height = window.innerHeight;
// draw a circle
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();
// render to screen canvas
screen.drawImage(buffer, 0, 0);
// clear canvas when click
canvas.addEventListener('click', () => {
context.clearRect(0, 0, buffer.width, buffer.height);
// only the next drawing operation on screen will be visible
// everything else will get cleared out
screen.globalCompositeOperation = "copy";
screen.drawImage(buffer, 0, 0);
// set back to default mode
screen.globalCompositeOperation = "sourc-over";
})<canvas id="canvas"></canvas>const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// initialize
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
buffer.width = window.innerWidth;
buffer.height = window.innerHeight;
// draw a circle
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();
// render to screen canvas
screen.drawImage(buffer, 0, 0);
// clear canvas when click
canvas.addEventListener('click', () => {
context.clearRect(0, 0, buffer.width, buffer.height);
// only the next drawing operation on screen will be visible
// everything else will get cleared out
screen.globalCompositeOperation = "copy";
screen.drawImage(buffer, 0, 0);
// set back to default mode
screen.globalCompositeOperation = "sourc-over";
})<canvas id="canvas"></canvas>const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// initialize
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
buffer.width = window.innerWidth;
buffer.height = window.innerHeight;
// draw a circle
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();
// render to screen canvas
screen.drawImage(buffer, 0, 0);
// clear canvas when click
canvas.addEventListener('click', () => {
context.clearRect(0, 0, buffer.width, buffer.height);
// only the next drawing operation on screen will be visible
// everything else will get cleared out
screen.globalCompositeOperation = "copy";
screen.drawImage(buffer, 0, 0);
// set back to default mode
screen.globalCompositeOperation = "sourc-over";
})<canvas id="canvas"></canvas>answered Nov 13 '18 at 1:35
KaiidoKaiido
39.7k45899
answered Nov 13 '18 at 1:35
KaiidoKaiido
39.7k45899
answered Nov 13 '18 at 1:35
KaiidoKaiido
39.7k45899
answered Nov 13 '18 at 1:35
KaiidoKaiido
39.7k45899
39.7k45899
Awesome! Have learned compositing modes
– sabertazimi
Nov 13 '18 at 10:55
add a comment |
Awesome! Have learned compositing modes
– sabertazimi
Nov 13 '18 at 10:55
Awesome! Have learned compositing modes
– sabertazimi
Nov 13 '18 at 10:55
Awesome! Have learned compositing modes
– sabertazimi
Nov 13 '18 at 10:55
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%2f53265265%2fwhy-i-cant-clear-a-canvas-with-another-empty-canvas-in-html5%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
In javaScript you only get a reference of your objects. if you have 2 of them, you have 2 exact the same object, if you change the one, then you changed the other too. That is the reason why your function not work like you think.
– episch
Nov 12 '18 at 15:33
HTML5 only allow one
canvasinstance?– sabertazimi
Nov 12 '18 at 15:35
bufferandcanvasrefer to different<canvas>instances in above code– sabertazimi
Nov 12 '18 at 15:37
No that was not what I meant. I mean in your JavaScript this is const buffer = document.createElement ('canvas'); const canvas = document.getElementById ('canvas'); takes care of the buffer and canvas are both references from the same canvas, all changes to buffer or canvas, directly affect both variables, which is just a reference of the objects in there.
– episch
Nov 12 '18 at 15:38
2
fillRectdoesn't truly clearbufferandcanvas(It works inline 14too).– sabertazimi
Nov 12 '18 at 15:49