{"id":32590,"date":"2023-01-31T10:48:46","date_gmt":"2023-01-31T05:18:46","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/"},"modified":"2023-01-31T10:48:46","modified_gmt":"2023-01-31T05:18:46","slug":"solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/","title":{"rendered":"[Solved] How can I create five pointed stars in canvas using function? [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-58043598\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"58043598\" data-parentid=\"58043287\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>Make a loop of the number of points in the shape. In the case of a 5 pointed star that is 10 points because you have the outer points to make the spikes and the inner points which come back into the shape.<\/p>\n<p>Inside the loop you find each consecutive point (x, y coordinate) to draw a line to e.g. using <code>ctx.lineTo(x, y);<\/code>.<\/p>\n<p>To do this I would use sine and cosine which looks like this:<\/p>\n<pre><code>  const x = xOffset+Math.sin(angle)*radius;\n  const y = yOffset+Math.cos(angle)*radius;\n<\/code><\/pre>\n<p>You just need to provide the offsets, the angle, and the radius, and it will give you the x, y coordinates.<\/p>\n<p>Start with a loop for each point in the star:<\/p>\n<pre><code>for(let i = 0; i &lt; 10; i ++){ ... }\n<\/code><\/pre>\n<p>And use the sine\/cosine code to get the point&#8217;s x,y coordinate, so you can draw a line to it with <code>ctx.lineTo(x,y)<\/code>.<\/p>\n<p>Sine and cosine are functions that take an angle in radians. That is an angle between <code>0 and 2pi<\/code> or <code>-pi\/2 to +pi\/2<\/code>.<\/p>\n<p>To get the angle around the center of our star which these functions will understand, you need to normalize i to between 0 and 1 instead of 0 and 10, so you divide it by 10. Then you multiply this by 2pi to get a value between 0 and 2pi. This now gives you an angle for each iteration of the loop which makes a full circle.<\/p>\n<p>Next you want to get the radius, which is simply a pixel distance value you provide to give the star size. However, the inner points will need to be less than the max radius so that it actually makes spikes. To do this you can use the modulo operator to determine if you are in an odd or even iteration in the loop. E.g. <code>i%2<\/code>. Use this value to change the radius at which the point will be made.<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>const canv = document.getElementById('c');\r\nconst ctx = canv.getContext('2d');\r\nconst w = window.innerWidth;\r\nconst h = window.innerHeight\r\ncanv.width = w;\r\ncanv.height = h;\r\nctx.clearRect(0,0,w,h);\r\n\/\/offset x,y, size, spokes, rotation 0 to 1.\r\nfunction star(ox, oy, s = 10, n = 5, r = 0.25){\r\n  ctx.beginPath();\r\n  \r\n  for(let i=0;i&lt;n*2;i++){\r\n    let rotation = Math.PI*2*r;\r\n    let angle = (i\/(n*2))*Math.PI*2+rotation;\r\n    let dist = s*(i%2)+s;\r\n    let x = ox+Math.cos(angle)*dist;\r\n    let y = oy+Math.sin(angle)*dist;\r\n    if(i === 0) {\r\n      ctx.moveTo(x, y);\r\n      continue; \/\/skip\r\n    }\r\n    ctx.lineTo(x, y);\r\n  }\r\n  ctx.closePath();\r\n}\r\n\r\nctx.fillStyle=\"magenta\";\r\nstar(w\/2, h\/2, 10, 4, 0.125);\r\nctx.fill();\r\n\r\nctx.fillStyle=\"red\";\r\nstar(w*0.2, h*0.2, 5, 5);\r\nctx.fill();\r\n\r\nctx.fillStyle=\"orange\";\r\nstar(w*0.33, h*0.33, 20, 5);\r\nctx.fill();\r\n\r\nctx.fillStyle=\"yellow\";\r\nstar(w*0.66, h*0.25, 30, 6);\r\nctx.fill();\r\n\r\nctx.fillStyle=\"green\";\r\nstar(w*0.2, h*0.75, 40, 7);\r\nctx.fill();\r\n\r\nctx.fillStyle=\"cyan\";\r\nstar(w*0.82, h*0.8, 50, 8, 1\/16);\r\nctx.fill();<\/code><\/pre>\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>canvas {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n background-color: black;\r\n}<\/code><\/pre>\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;canvas id=\"c\"&gt;&lt;\/canvas&gt;<\/code><\/pre>\n<\/div>\n<\/div><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">1<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved How can I create five pointed stars in canvas using function? [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Make a loop of the number of points in the shape. In the case of a 5 pointed star that is 10 points because you have the outer points to make the spikes and the inner points which come back into the shape. Inside the loop you find each consecutive point (x, y coordinate) &#8230; <a title=\"[Solved] How can I create five pointed stars in canvas using function? [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/\" aria-label=\"More on [Solved] How can I create five pointed stars in canvas using function? [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[1728,333],"class_list":["post-32590","post","type-post","status-publish","format-standard","hentry","category-solved","tag-canvas","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] How can I create five pointed stars in canvas using function? [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How can I create five pointed stars in canvas using function? [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Make a loop of the number of points in the shape. In the case of a 5 pointed star that is 10 points because you have the outer points to make the spikes and the inner points which come back into the shape. Inside the loop you find each consecutive point (x, y coordinate) ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-31T05:18:46+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How can I create five pointed stars in canvas using function? [closed]\",\"datePublished\":\"2023-01-31T05:18:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/\"},\"wordCount\":312,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"canvas\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/\",\"name\":\"[Solved] How can I create five pointed stars in canvas using function? [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2023-01-31T05:18:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How can I create five pointed stars in canvas using function? [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How can I create five pointed stars in canvas using function? [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How can I create five pointed stars in canvas using function? [closed] - JassWeb","og_description":"[ad_1] Make a loop of the number of points in the shape. In the case of a 5 pointed star that is 10 points because you have the outer points to make the spikes and the inner points which come back into the shape. Inside the loop you find each consecutive point (x, y coordinate) ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/","og_site_name":"JassWeb","article_published_time":"2023-01-31T05:18:46+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How can I create five pointed stars in canvas using function? [closed]","datePublished":"2023-01-31T05:18:46+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/"},"wordCount":312,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["canvas","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/","name":"[Solved] How can I create five pointed stars in canvas using function? [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-01-31T05:18:46+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-can-i-create-five-pointed-stars-in-canvas-using-function-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How can I create five pointed stars in canvas using function? [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/32590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=32590"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/32590\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=32590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=32590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=32590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}