HTML canvas leaves unwanted trails
I'm trying to plot the Bifurcation diagram using HTML canvas and JS.
Here's my tool.
The problem is the canvas doesn't render the data accurately.
Here's a comparison of what the chart should look like, and how it's actually rendered with my code:
And here's a magnified region of the function: 
I went throught the data set and there seems to be no intermediate values. Thus, my question is - why does the browser leave these unwanted trails between the objects that should be only drawn?
Looks more like a 'connect the dots' type of chart, than a plot of discrete data points.
Here's the part of the code I use for the drawing:
// ... get elements, calculate data, etc.
canvas.width = 800;
canvas.height = canvas.width / 2;
let xSpread = canvas.width / (rMax - rMin);
for (let i in chartData) {
let x = (i - rMin) * xSpread * scale;
for (let j in chartData[i]) {
let y = canvas.height - (chartData[i][j] * canvas.height * scale);
ctx.arc(x, y, pointSize, 0, 2 * Math.PI);
}
}
ctx.fillStyle = "#0a5e8c";
ctx.fill();
Thanks in advance!
javascript html canvas
edited Nov 13 '18 at 12:12
barbsan
2,22811222
asked Nov 13 '18 at 12:09
kbokbo
83
add a comment |
I'm trying to plot the Bifurcation diagram using HTML canvas and JS.
Here's my tool.
The problem is the canvas doesn't render the data accurately.
Here's a comparison of what the chart should look like, and how it's actually rendered with my code:
And here's a magnified region of the function:
I went throught the data set and there seems to be no intermediate values. Thus, my question is - why does the browser leave these unwanted trails between the objects that should be only drawn?
Looks more like a 'connect the dots' type of chart, than a plot of discrete data points.
Here's the part of the code I use for the drawing:
// ... get elements, calculate data, etc.
canvas.width = 800;
canvas.height = canvas.width / 2;
let xSpread = canvas.width / (rMax - rMin);
for (let i in chartData) {
let x = (i - rMin) * xSpread * scale;
for (let j in chartData[i]) {
let y = canvas.height - (chartData[i][j] * canvas.height * scale);
ctx.arc(x, y, pointSize, 0, 2 * Math.PI);
}
}
ctx.fillStyle = "#0a5e8c";
ctx.fill();
Thanks in advance!
javascript html canvas
edited Nov 13 '18 at 12:12
barbsan
2,22811222
asked Nov 13 '18 at 12:09
kbokbo
83
1
Hi @kbo... i truly think that you need to usebeginPathandclosePathin such complex drawings (developer.mozilla.org/en-US/docs/Web/API/…)
– ymz
Nov 13 '18 at 12:14
add a comment |
I'm trying to plot the Bifurcation diagram using HTML canvas and JS.
Here's my tool.
The problem is the canvas doesn't render the data accurately.
Here's a comparison of what the chart should look like, and how it's actually rendered with my code:
And here's a magnified region of the function:
I went throught the data set and there seems to be no intermediate values. Thus, my question is - why does the browser leave these unwanted trails between the objects that should be only drawn?
Looks more like a 'connect the dots' type of chart, than a plot of discrete data points.
Here's the part of the code I use for the drawing:
// ... get elements, calculate data, etc.
canvas.width = 800;
canvas.height = canvas.width / 2;
let xSpread = canvas.width / (rMax - rMin);
for (let i in chartData) {
let x = (i - rMin) * xSpread * scale;
for (let j in chartData[i]) {
let y = canvas.height - (chartData[i][j] * canvas.height * scale);
ctx.arc(x, y, pointSize, 0, 2 * Math.PI);
}
}
ctx.fillStyle = "#0a5e8c";
ctx.fill();
Thanks in advance!
javascript html canvas
edited Nov 13 '18 at 12:12
barbsan
2,22811222
asked Nov 13 '18 at 12:09
kbokbo
83
I'm trying to plot the Bifurcation diagram using HTML canvas and JS.
Here's my tool.
The problem is the canvas doesn't render the data accurately.
Here's a comparison of what the chart should look like, and how it's actually rendered with my code:
And here's a magnified region of the function:
I went throught the data set and there seems to be no intermediate values. Thus, my question is - why does the browser leave these unwanted trails between the objects that should be only drawn?
Looks more like a 'connect the dots' type of chart, than a plot of discrete data points.
Here's the part of the code I use for the drawing:
// ... get elements, calculate data, etc.
canvas.width = 800;
canvas.height = canvas.width / 2;
let xSpread = canvas.width / (rMax - rMin);
for (let i in chartData) {
let x = (i - rMin) * xSpread * scale;
for (let j in chartData[i]) {
let y = canvas.height - (chartData[i][j] * canvas.height * scale);
ctx.arc(x, y, pointSize, 0, 2 * Math.PI);
}
}
ctx.fillStyle = "#0a5e8c";
ctx.fill();
Thanks in advance!
javascript html canvas
javascript html canvas
edited Nov 13 '18 at 12:12
barbsan
2,22811222
asked Nov 13 '18 at 12:09
kbokbo
83
edited Nov 13 '18 at 12:12
barbsan
2,22811222
asked Nov 13 '18 at 12:09
kbokbo
83
edited Nov 13 '18 at 12:12
barbsan
2,22811222
edited Nov 13 '18 at 12:12
barbsan
2,22811222
edited Nov 13 '18 at 12:12
barbsan
2,22811222
2,22811222
asked Nov 13 '18 at 12:09
kbokbo
83
asked Nov 13 '18 at 12:09
kbokbo
83
asked Nov 13 '18 at 12:09
kbokbo
83
83
1
Hi @kbo... i truly think that you need to usebeginPathandclosePathin such complex drawings (developer.mozilla.org/en-US/docs/Web/API/…)
– ymz
Nov 13 '18 at 12:14
add a comment |
1
Hi @kbo... i truly think that you need to usebeginPathandclosePathin such complex drawings (developer.mozilla.org/en-US/docs/Web/API/…)
– ymz
Nov 13 '18 at 12:14
1
1
Hi @kbo... i truly think that you need to use
beginPath and closePath in such complex drawings (developer.mozilla.org/en-US/docs/Web/API/…)– ymz
Nov 13 '18 at 12:14
Hi @kbo... i truly think that you need to use
beginPath and closePath in such complex drawings (developer.mozilla.org/en-US/docs/Web/API/…)– ymz
Nov 13 '18 at 12:14
add a comment |
1 Answer
1
active
oldest
votes
Put a
moveTo(x + pointSize, y);
before each
ctx.arc(x, y, pointSize, 0, 2 * Math.PI);
Without this, it's like you are drawing without lifting your pen.
answered Nov 13 '18 at 12:22
t.m.t.m.
656615
This solved the issue, thanks :)
– kbo
Nov 13 '18 at 12:55
You're welcome :). If that's the case, would you accept my answer (by the green tick icon)?
– t.m.
Nov 13 '18 at 13:05
should bectx.arc(x + pointSize, y..., otherwise you'll draw the line from the center to the arc's starting position (which is at 3o'clock). Won't really be noticeable with fill(), but definitely with stroke().
– Kaiido
Nov 13 '18 at 13:46
@Kaiido That's right, but in this particular case arc function is used to draw filled dots, and I thought that sum would be a redundant operation.
– t.m.
Nov 13 '18 at 14:00
That operation is anyway done by the browser. I didn't do a perf-test, but it wouldn't surprise me that if this lineTo is avoided, there will be a win.
– Kaiido
Nov 13 '18 at 14:27
|
show 2 more comments
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%2f53280736%2fhtml-canvas-leaves-unwanted-trails%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
Put a
moveTo(x + pointSize, y);
before each
ctx.arc(x, y, pointSize, 0, 2 * Math.PI);
Without this, it's like you are drawing without lifting your pen.
answered Nov 13 '18 at 12:22
t.m.t.m.
656615
This solved the issue, thanks :)
– kbo
Nov 13 '18 at 12:55
You're welcome :). If that's the case, would you accept my answer (by the green tick icon)?
– t.m.
Nov 13 '18 at 13:05
should bectx.arc(x + pointSize, y..., otherwise you'll draw the line from the center to the arc's starting position (which is at 3o'clock). Won't really be noticeable with fill(), but definitely with stroke().
– Kaiido
Nov 13 '18 at 13:46
@Kaiido That's right, but in this particular case arc function is used to draw filled dots, and I thought that sum would be a redundant operation.
– t.m.
Nov 13 '18 at 14:00
That operation is anyway done by the browser. I didn't do a perf-test, but it wouldn't surprise me that if this lineTo is avoided, there will be a win.
– Kaiido
Nov 13 '18 at 14:27
|
show 2 more comments
Put a
moveTo(x + pointSize, y);
before each
ctx.arc(x, y, pointSize, 0, 2 * Math.PI);
Without this, it's like you are drawing without lifting your pen.
answered Nov 13 '18 at 12:22
t.m.t.m.
656615
This solved the issue, thanks :)
– kbo
Nov 13 '18 at 12:55
You're welcome :). If that's the case, would you accept my answer (by the green tick icon)?
– t.m.
Nov 13 '18 at 13:05
should bectx.arc(x + pointSize, y..., otherwise you'll draw the line from the center to the arc's starting position (which is at 3o'clock). Won't really be noticeable with fill(), but definitely with stroke().
– Kaiido
Nov 13 '18 at 13:46
@Kaiido That's right, but in this particular case arc function is used to draw filled dots, and I thought that sum would be a redundant operation.
– t.m.
Nov 13 '18 at 14:00
That operation is anyway done by the browser. I didn't do a perf-test, but it wouldn't surprise me that if this lineTo is avoided, there will be a win.
– Kaiido
Nov 13 '18 at 14:27
|
show 2 more comments
Put a
moveTo(x + pointSize, y);
before each
ctx.arc(x, y, pointSize, 0, 2 * Math.PI);
Without this, it's like you are drawing without lifting your pen.
answered Nov 13 '18 at 12:22
t.m.t.m.
656615
Put a
moveTo(x + pointSize, y);
before each
ctx.arc(x, y, pointSize, 0, 2 * Math.PI);
Without this, it's like you are drawing without lifting your pen.
answered Nov 13 '18 at 12:22
t.m.t.m.
656615
edited Nov 13 '18 at 15:42
answered Nov 13 '18 at 12:22
t.m.t.m.
656615
answered Nov 13 '18 at 12:22
t.m.t.m.
656615
answered Nov 13 '18 at 12:22
t.m.t.m.
656615
656615
This solved the issue, thanks :)
– kbo
Nov 13 '18 at 12:55
You're welcome :). If that's the case, would you accept my answer (by the green tick icon)?
– t.m.
Nov 13 '18 at 13:05
should bectx.arc(x + pointSize, y..., otherwise you'll draw the line from the center to the arc's starting position (which is at 3o'clock). Won't really be noticeable with fill(), but definitely with stroke().
– Kaiido
Nov 13 '18 at 13:46
@Kaiido That's right, but in this particular case arc function is used to draw filled dots, and I thought that sum would be a redundant operation.
– t.m.
Nov 13 '18 at 14:00
That operation is anyway done by the browser. I didn't do a perf-test, but it wouldn't surprise me that if this lineTo is avoided, there will be a win.
– Kaiido
Nov 13 '18 at 14:27
|
show 2 more comments
This solved the issue, thanks :)
– kbo
Nov 13 '18 at 12:55
You're welcome :). If that's the case, would you accept my answer (by the green tick icon)?
– t.m.
Nov 13 '18 at 13:05
should bectx.arc(x + pointSize, y..., otherwise you'll draw the line from the center to the arc's starting position (which is at 3o'clock). Won't really be noticeable with fill(), but definitely with stroke().
– Kaiido
Nov 13 '18 at 13:46
@Kaiido That's right, but in this particular case arc function is used to draw filled dots, and I thought that sum would be a redundant operation.
– t.m.
Nov 13 '18 at 14:00
That operation is anyway done by the browser. I didn't do a perf-test, but it wouldn't surprise me that if this lineTo is avoided, there will be a win.
– Kaiido
Nov 13 '18 at 14:27
This solved the issue, thanks :)
– kbo
Nov 13 '18 at 12:55
This solved the issue, thanks :)
– kbo
Nov 13 '18 at 12:55
You're welcome :). If that's the case, would you accept my answer (by the green tick icon)?
– t.m.
Nov 13 '18 at 13:05
You're welcome :). If that's the case, would you accept my answer (by the green tick icon)?
– t.m.
Nov 13 '18 at 13:05
should be
ctx.arc(x + pointSize, y..., otherwise you'll draw the line from the center to the arc's starting position (which is at 3o'clock). Won't really be noticeable with fill(), but definitely with stroke().– Kaiido
Nov 13 '18 at 13:46
should be
ctx.arc(x + pointSize, y..., otherwise you'll draw the line from the center to the arc's starting position (which is at 3o'clock). Won't really be noticeable with fill(), but definitely with stroke().– Kaiido
Nov 13 '18 at 13:46
@Kaiido That's right, but in this particular case arc function is used to draw filled dots, and I thought that sum would be a redundant operation.
– t.m.
Nov 13 '18 at 14:00
@Kaiido That's right, but in this particular case arc function is used to draw filled dots, and I thought that sum would be a redundant operation.
– t.m.
Nov 13 '18 at 14:00
That operation is anyway done by the browser. I didn't do a perf-test, but it wouldn't surprise me that if this lineTo is avoided, there will be a win.
– Kaiido
Nov 13 '18 at 14:27
That operation is anyway done by the browser. I didn't do a perf-test, but it wouldn't surprise me that if this lineTo is avoided, there will be a win.
– Kaiido
Nov 13 '18 at 14:27
|
show 2 more comments
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%2f53280736%2fhtml-canvas-leaves-unwanted-trails%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
1
Hi @kbo... i truly think that you need to use
beginPathandclosePathin such complex drawings (developer.mozilla.org/en-US/docs/Web/API/…)– ymz
Nov 13 '18 at 12:14