{"id":9279,"date":"2022-10-06T04:29:48","date_gmt":"2022-10-06T04:29:48","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=9279"},"modified":"2022-10-06T04:29:48","modified_gmt":"2022-10-06T04:29:48","slug":"canvas-coordinates","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/10\/06\/canvas-coordinates\/","title":{"rendered":"Canvas Coordinates"},"content":{"rendered":"\n<p>The HTML canvas is considered to be a two-dimensional grid, the upper-left corner of which has the coordinates (0,0).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"drawing-a-line-2\">Drawing a Line<\/h2>\n\n\n\n<p>The methods below are used to draw a straight line on a canvas:<\/p>\n\n\n\n<ul><li>moveTo(x,y), which specifies the starting point of the line<\/li><li>lineTo(x,y), which specifies the ending point of the line<\/li><\/ul>\n\n\n\n<p>Use one of the &#8220;ink&#8221; methods to draw a line, for example, the stroke().<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-of-the-html-lt-canvas-gt-element-to-draw-a-line-4\">Example of the HTML &lt;canvas&gt; element to draw a line:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Title of the document&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;canvas width=\"300\" height=\"150\" style=\"border:1px solid #cccccc;\" id=\"canvasExample\"&gt;\n      Your browser does not support the HTML5 canvas tag.\n    &lt;\/canvas&gt;\n    &lt;script&gt;\n      var c = document.getElementById(\"canvasExample\");\n      var ctx = c.getContext(\"2d\");\n      ctx.moveTo(0, 0);\n      ctx.lineTo(300, 150);\n      ctx.strokeStyle = '#359900';\n      ctx.stroke();\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>In the example above, we have defined the starting and ending points of the line, that we have used the stroke() method to draw it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"drawing-a-circle-7\">Drawing a Circle<\/h2>\n\n\n\n<p>The methods below are used to draw a circle on a canvas:<\/p>\n\n\n\n<ul><li>beginPath(), which begins a path<\/li><li>arc(x,y,r,startangle,endangle), which creates an arc\/curve. If you want to create a circle with arc(): set start angle to 0 and end angle to 2*Math.PI. The x and y specify the x- and y-coordinates of the circle\u2019s center. The r parameter specifies the radius of the circle.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-of-the-html-lt-canvas-gt-element-to-draw-a-circle-9\">Example of the HTML &lt;canvas&gt; element to draw a circle:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Title of the document&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;canvas id=\"exampleCanvas\" width=\"250\" height=\"200\" style=\"border:1px solid #dddddd;\"&gt;\n      The canvas tag is not supported by your browser..\n    &lt;\/canvas&gt;\n    &lt;script&gt;\n      var canvas = document.getElementById(\"exampleCanvas\");\n      var ctx = canvas.getContext(\"2d\");\n      ctx.beginPath();\n      ctx.arc(125, 95, 70, 0, 2 * Math.PI);\n      ctx.strokeStyle = '#1c87c9';\n      ctx.stroke();\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>In the example above, we have defined a circle with the arc() method and used the stroke() method to draw the circle.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The HTML canvas is considered to be a two-dimensional grid, the upper-left corner of which has the coordinates (0,0). Drawing a Line The methods below are used to draw a straight line on a canvas: moveTo(x,y), which specifies the starting point of the line lineTo(x,y), which specifies the ending point of the line Use one [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[546],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9279"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9279"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9279\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}