How to draw in canvas 2D this shape and fill it with color?
This should be without this diagonal. I want to draw two arcs one with x2 smaller radius, join them and fill(). I know how to calculate the end and beginning of an arc, problem is arcs are always drawn clockwise, so to draw second arc within same ctx.beginPath() I have to use something like ctx.moveTo() but problem with moveTo is I get two different paths as proof closePath() cause this diagonal.
So I want to know how to draw arc in other direction than clockwise or how to use moveTo() but still beeing able to fill this shape. Filling now cause following issue:
White diagonal visible.
javascript canvas html5-canvas
asked Nov 14 '18 at 13:43
ZydnarZydnar
8661020
add a comment |
This should be without this diagonal. I want to draw two arcs one with x2 smaller radius, join them and fill(). I know how to calculate the end and beginning of an arc, problem is arcs are always drawn clockwise, so to draw second arc within same ctx.beginPath() I have to use something like ctx.moveTo() but problem with moveTo is I get two different paths as proof closePath() cause this diagonal.
So I want to know how to draw arc in other direction than clockwise or how to use moveTo() but still beeing able to fill this shape. Filling now cause following issue:
White diagonal visible.
javascript canvas html5-canvas
asked Nov 14 '18 at 13:43
ZydnarZydnar
8661020
could you share a snippet of what you've accomplished so far?
– shkaper
Nov 14 '18 at 13:46
add a comment |
This should be without this diagonal. I want to draw two arcs one with x2 smaller radius, join them and fill(). I know how to calculate the end and beginning of an arc, problem is arcs are always drawn clockwise, so to draw second arc within same ctx.beginPath() I have to use something like ctx.moveTo() but problem with moveTo is I get two different paths as proof closePath() cause this diagonal.
So I want to know how to draw arc in other direction than clockwise or how to use moveTo() but still beeing able to fill this shape. Filling now cause following issue:
White diagonal visible.
javascript canvas html5-canvas
asked Nov 14 '18 at 13:43
ZydnarZydnar
8661020
This should be without this diagonal. I want to draw two arcs one with x2 smaller radius, join them and fill(). I know how to calculate the end and beginning of an arc, problem is arcs are always drawn clockwise, so to draw second arc within same ctx.beginPath() I have to use something like ctx.moveTo() but problem with moveTo is I get two different paths as proof closePath() cause this diagonal.
So I want to know how to draw arc in other direction than clockwise or how to use moveTo() but still beeing able to fill this shape. Filling now cause following issue:
White diagonal visible.
javascript canvas html5-canvas
javascript canvas html5-canvas
asked Nov 14 '18 at 13:43
ZydnarZydnar
8661020
asked Nov 14 '18 at 13:43
ZydnarZydnar
8661020
asked Nov 14 '18 at 13:43
ZydnarZydnar
8661020
asked Nov 14 '18 at 13:43
ZydnarZydnar
8661020
asked Nov 14 '18 at 13:43
ZydnarZydnar
8661020
8661020
could you share a snippet of what you've accomplished so far?
– shkaper
Nov 14 '18 at 13:46
add a comment |
could you share a snippet of what you've accomplished so far?
– shkaper
Nov 14 '18 at 13:46
could you share a snippet of what you've accomplished so far?
– shkaper
Nov 14 '18 at 13:46
could you share a snippet of what you've accomplished so far?
– shkaper
Nov 14 '18 at 13:46
add a comment |
2 Answers
2
active
oldest
votes
Arcs are not always drawn clockwise. The sixth parameter to .arc is a boolean which when true will make the arc be drawn anti-clockwise.
However you will also need to reverse the start and end angles, otherwise the arc will attempt to go the long way around:
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(20, 20, 40, 30 * Math.PI / 180, 80 * Math.PI / 180);
ctx.arc(20, 20, 150, 80 * Math.PI / 180, 30 * Math.PI / 180, true);
ctx.closePath();
ctx.lineWidth = 3;
ctx.stroke();
ctx.fillStyle = '#e0e0ff';
ctx.fill();<canvas id="c" width="200" height="200" />answered Nov 14 '18 at 13:48
AlnitakAlnitak
271k62342432
This is it, only start and end angle switch places because it's anti-clockwise. Thanks!
– Zydnar
Nov 14 '18 at 13:53
Even nicer solution than mine - I was calculating beginning and the end of arcs and then using lineTo().
– Zydnar
Nov 14 '18 at 13:56
add a comment |
Why not use the lineWidth property to make the arc thicker. In this case you'll only need one call to arc:
let canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
context.beginPath();
context.arc(20, 20, 40, 0, Math.PI / 4);
context.lineWidth = 15;
context.stroke();<canvas id="canvas"></canvas>answered Nov 14 '18 at 13:56
ibrahim mahriribrahim mahrir
22.1k41949
Creative solution.
– Zydnar
Nov 14 '18 at 13:58
Thectx.closePathfunction is a path function and redundant in your example. Similar to actx.lineToit creates a path segment from the last path point to the previousctx.moveToor first point after actx.beginPath. It is not related or needed after actx.beginPathcall.
– Blindman67
Nov 14 '18 at 14:25
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%2f53301650%2fhow-to-draw-in-canvas-2d-this-shape-and-fill-it-with-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Arcs are not always drawn clockwise. The sixth parameter to .arc is a boolean which when true will make the arc be drawn anti-clockwise.
However you will also need to reverse the start and end angles, otherwise the arc will attempt to go the long way around:
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(20, 20, 40, 30 * Math.PI / 180, 80 * Math.PI / 180);
ctx.arc(20, 20, 150, 80 * Math.PI / 180, 30 * Math.PI / 180, true);
ctx.closePath();
ctx.lineWidth = 3;
ctx.stroke();
ctx.fillStyle = '#e0e0ff';
ctx.fill();<canvas id="c" width="200" height="200" />answered Nov 14 '18 at 13:48
AlnitakAlnitak
271k62342432
This is it, only start and end angle switch places because it's anti-clockwise. Thanks!
– Zydnar
Nov 14 '18 at 13:53
Even nicer solution than mine - I was calculating beginning and the end of arcs and then using lineTo().
– Zydnar
Nov 14 '18 at 13:56
add a comment |
Arcs are not always drawn clockwise. The sixth parameter to .arc is a boolean which when true will make the arc be drawn anti-clockwise.
However you will also need to reverse the start and end angles, otherwise the arc will attempt to go the long way around:
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(20, 20, 40, 30 * Math.PI / 180, 80 * Math.PI / 180);
ctx.arc(20, 20, 150, 80 * Math.PI / 180, 30 * Math.PI / 180, true);
ctx.closePath();
ctx.lineWidth = 3;
ctx.stroke();
ctx.fillStyle = '#e0e0ff';
ctx.fill();<canvas id="c" width="200" height="200" />answered Nov 14 '18 at 13:48
AlnitakAlnitak
271k62342432
This is it, only start and end angle switch places because it's anti-clockwise. Thanks!
– Zydnar
Nov 14 '18 at 13:53
Even nicer solution than mine - I was calculating beginning and the end of arcs and then using lineTo().
– Zydnar
Nov 14 '18 at 13:56
add a comment |
Arcs are not always drawn clockwise. The sixth parameter to .arc is a boolean which when true will make the arc be drawn anti-clockwise.
However you will also need to reverse the start and end angles, otherwise the arc will attempt to go the long way around:
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(20, 20, 40, 30 * Math.PI / 180, 80 * Math.PI / 180);
ctx.arc(20, 20, 150, 80 * Math.PI / 180, 30 * Math.PI / 180, true);
ctx.closePath();
ctx.lineWidth = 3;
ctx.stroke();
ctx.fillStyle = '#e0e0ff';
ctx.fill();<canvas id="c" width="200" height="200" />answered Nov 14 '18 at 13:48
AlnitakAlnitak
271k62342432
Arcs are not always drawn clockwise. The sixth parameter to .arc is a boolean which when true will make the arc be drawn anti-clockwise.
However you will also need to reverse the start and end angles, otherwise the arc will attempt to go the long way around:
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(20, 20, 40, 30 * Math.PI / 180, 80 * Math.PI / 180);
ctx.arc(20, 20, 150, 80 * Math.PI / 180, 30 * Math.PI / 180, true);
ctx.closePath();
ctx.lineWidth = 3;
ctx.stroke();
ctx.fillStyle = '#e0e0ff';
ctx.fill();<canvas id="c" width="200" height="200" />var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(20, 20, 40, 30 * Math.PI / 180, 80 * Math.PI / 180);
ctx.arc(20, 20, 150, 80 * Math.PI / 180, 30 * Math.PI / 180, true);
ctx.closePath();
ctx.lineWidth = 3;
ctx.stroke();
ctx.fillStyle = '#e0e0ff';
ctx.fill();<canvas id="c" width="200" height="200" />var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(20, 20, 40, 30 * Math.PI / 180, 80 * Math.PI / 180);
ctx.arc(20, 20, 150, 80 * Math.PI / 180, 30 * Math.PI / 180, true);
ctx.closePath();
ctx.lineWidth = 3;
ctx.stroke();
ctx.fillStyle = '#e0e0ff';
ctx.fill();<canvas id="c" width="200" height="200" />answered Nov 14 '18 at 13:48
AlnitakAlnitak
271k62342432
edited Nov 14 '18 at 14:05
answered Nov 14 '18 at 13:48
AlnitakAlnitak
271k62342432
answered Nov 14 '18 at 13:48
AlnitakAlnitak
271k62342432
answered Nov 14 '18 at 13:48
AlnitakAlnitak
271k62342432
271k62342432
This is it, only start and end angle switch places because it's anti-clockwise. Thanks!
– Zydnar
Nov 14 '18 at 13:53
Even nicer solution than mine - I was calculating beginning and the end of arcs and then using lineTo().
– Zydnar
Nov 14 '18 at 13:56
add a comment |
This is it, only start and end angle switch places because it's anti-clockwise. Thanks!
– Zydnar
Nov 14 '18 at 13:53
Even nicer solution than mine - I was calculating beginning and the end of arcs and then using lineTo().
– Zydnar
Nov 14 '18 at 13:56
This is it, only start and end angle switch places because it's anti-clockwise. Thanks!
– Zydnar
Nov 14 '18 at 13:53
This is it, only start and end angle switch places because it's anti-clockwise. Thanks!
– Zydnar
Nov 14 '18 at 13:53
Even nicer solution than mine - I was calculating beginning and the end of arcs and then using lineTo().
– Zydnar
Nov 14 '18 at 13:56
Even nicer solution than mine - I was calculating beginning and the end of arcs and then using lineTo().
– Zydnar
Nov 14 '18 at 13:56
add a comment |
Why not use the lineWidth property to make the arc thicker. In this case you'll only need one call to arc:
let canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
context.beginPath();
context.arc(20, 20, 40, 0, Math.PI / 4);
context.lineWidth = 15;
context.stroke();<canvas id="canvas"></canvas>answered Nov 14 '18 at 13:56
ibrahim mahriribrahim mahrir
22.1k41949
Creative solution.
– Zydnar
Nov 14 '18 at 13:58
Thectx.closePathfunction is a path function and redundant in your example. Similar to actx.lineToit creates a path segment from the last path point to the previousctx.moveToor first point after actx.beginPath. It is not related or needed after actx.beginPathcall.
– Blindman67
Nov 14 '18 at 14:25
add a comment |
Why not use the lineWidth property to make the arc thicker. In this case you'll only need one call to arc:
let canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
context.beginPath();
context.arc(20, 20, 40, 0, Math.PI / 4);
context.lineWidth = 15;
context.stroke();<canvas id="canvas"></canvas>answered Nov 14 '18 at 13:56
ibrahim mahriribrahim mahrir
22.1k41949
Creative solution.
– Zydnar
Nov 14 '18 at 13:58
Thectx.closePathfunction is a path function and redundant in your example. Similar to actx.lineToit creates a path segment from the last path point to the previousctx.moveToor first point after actx.beginPath. It is not related or needed after actx.beginPathcall.
– Blindman67
Nov 14 '18 at 14:25
add a comment |
Why not use the lineWidth property to make the arc thicker. In this case you'll only need one call to arc:
let canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
context.beginPath();
context.arc(20, 20, 40, 0, Math.PI / 4);
context.lineWidth = 15;
context.stroke();<canvas id="canvas"></canvas>answered Nov 14 '18 at 13:56
ibrahim mahriribrahim mahrir
22.1k41949
Why not use the lineWidth property to make the arc thicker. In this case you'll only need one call to arc:
let canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
context.beginPath();
context.arc(20, 20, 40, 0, Math.PI / 4);
context.lineWidth = 15;
context.stroke();<canvas id="canvas"></canvas>let canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
context.beginPath();
context.arc(20, 20, 40, 0, Math.PI / 4);
context.lineWidth = 15;
context.stroke();<canvas id="canvas"></canvas>let canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
context.beginPath();
context.arc(20, 20, 40, 0, Math.PI / 4);
context.lineWidth = 15;
context.stroke();<canvas id="canvas"></canvas>answered Nov 14 '18 at 13:56
ibrahim mahriribrahim mahrir
22.1k41949
edited Nov 14 '18 at 14:31
answered Nov 14 '18 at 13:56
ibrahim mahriribrahim mahrir
22.1k41949
answered Nov 14 '18 at 13:56
ibrahim mahriribrahim mahrir
22.1k41949
answered Nov 14 '18 at 13:56
ibrahim mahriribrahim mahrir
22.1k41949
22.1k41949
Creative solution.
– Zydnar
Nov 14 '18 at 13:58
Thectx.closePathfunction is a path function and redundant in your example. Similar to actx.lineToit creates a path segment from the last path point to the previousctx.moveToor first point after actx.beginPath. It is not related or needed after actx.beginPathcall.
– Blindman67
Nov 14 '18 at 14:25
add a comment |
Creative solution.
– Zydnar
Nov 14 '18 at 13:58
Thectx.closePathfunction is a path function and redundant in your example. Similar to actx.lineToit creates a path segment from the last path point to the previousctx.moveToor first point after actx.beginPath. It is not related or needed after actx.beginPathcall.
– Blindman67
Nov 14 '18 at 14:25
Creative solution.
– Zydnar
Nov 14 '18 at 13:58
Creative solution.
– Zydnar
Nov 14 '18 at 13:58
The
ctx.closePath function is a path function and redundant in your example. Similar to a ctx.lineTo it creates a path segment from the last path point to the previous ctx.moveTo or first point after a ctx.beginPath. It is not related or needed after a ctx.beginPath call.– Blindman67
Nov 14 '18 at 14:25
The
ctx.closePath function is a path function and redundant in your example. Similar to a ctx.lineTo it creates a path segment from the last path point to the previous ctx.moveTo or first point after a ctx.beginPath. It is not related or needed after a ctx.beginPath call.– Blindman67
Nov 14 '18 at 14:25
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%2f53301650%2fhow-to-draw-in-canvas-2d-this-shape-and-fill-it-with-color%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
could you share a snippet of what you've accomplished so far?
– shkaper
Nov 14 '18 at 13:46