{"id":1199,"date":"2017-12-29T17:05:38","date_gmt":"2017-12-29T22:05:38","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1199"},"modified":"2017-12-30T15:59:42","modified_gmt":"2017-12-30T20:59:42","slug":"javascript-intro-web-game-development-part-2-canvascontext-rounded-corners","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2017\/12\/29\/javascript-intro-web-game-development-part-2-canvascontext-rounded-corners\/","title":{"rendered":"JavaScript: Intro to Web Game Development &#8211; Part 2: canvasContext with rounded corners"},"content":{"rendered":"<p>This is Part 2 of the series where I walk through the steps to create a Pong game in the web browser using JavaScript. Part 1 is here:<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"13xKMBzfdq\"><p><a href=\"http:\/\/bluegalaxy.info\/codewalk\/2017\/12\/29\/javascript-intro-web-game-development-part-1-canvas-element\/\">JavaScript: Intro to Web Game Development &#8211; Part 1: canvas element<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"http:\/\/bluegalaxy.info\/codewalk\/2017\/12\/29\/javascript-intro-web-game-development-part-1-canvas-element\/embed\/#?secret=13xKMBzfdq\" data-secret=\"13xKMBzfdq\" width=\"600\" height=\"338\" title=\"&#8220;JavaScript: Intro to Web Game Development &#8211; Part 1: canvas element&#8221; &#8212; Chris Nielsen Code Walk\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p>In this step, I will create the black background for the pong game, but instead of a perfect rectangle, I am going to give the playing space rounded corners. Since I want to see a fresh copy of the game whenever I refresh my browser, I am going to define a function that launches whenever the window loads using:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">window.onload = function() {}<\/pre>\n<p>Inside this function, I am going to do the following:<\/p>\n<ul>\n<li>Refer to the canvas object defined in Step 1.<\/li>\n<li>Create a canvasContext to draw on<\/li>\n<li>Define canvas_width and canvas_height variables<\/li>\n<li>Define and call a new function called roundRect which will give the canvasContext rounded corners<\/li>\n<\/ul>\n<p>&nbsp;<br \/>\n<strong>Step 1: Refer to the canvas object defined in the HTML<br \/>\n<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">canvas = document.getElementById(\"gameCanvas\")<\/pre>\n<p>&nbsp;<br \/>\n<strong>Step 2: Create a canvasContext<\/strong><\/p>\n<p>Set the canvasContext using <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">getContext()<\/code>, with a value of &#8220;2d&#8221;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">canvasContext = canvas.getContext(\"2d\");<\/pre>\n<p>The canvasContext is the drawing context of the canvas. For more info about\u00a0 <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">canvas.getContext<\/code>, see:<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/getContext\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/getContext<\/a><\/p>\n<p>&#8220;2d&#8221; is the <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">contextType<\/code>. Setting this creates a <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">CanvasRenderingContext2D<\/code> object representing a 2d rendering context. For more information about CanvasRenderingContext2D, see:<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CanvasRenderingContext2D\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CanvasRenderingContext2D<\/a><\/p>\n<p>&nbsp;<br \/>\n<strong>Step 3: Set height and width variables<br \/>\n<\/strong><\/p>\n<p>Set the canvas_width and canvas_height variables with the canvas width and height:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var canvas_width = canvas.width;\r\nvar canvas_height = canvas.height;<\/pre>\n<p>&nbsp;<br \/>\n<strong>Step 4: Define and call a new function called roundRect<br \/>\n<\/strong><\/p>\n<p>The function roundRect will inherit from the CanvasRenderingContext2D object, which is why this function is defined using .prototype. For example: <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">CanvasRenderingContext2D.prototype.roundRect<\/code>:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius, fill, stroke) {<\/pre>\n<p>&#8220;prototype&#8221; is used for object inheritance:<br \/>\n<a href=\"http:\/\/javascriptissexy.com\/javascript-prototype-in-plain-detailed-language\/\">http:\/\/javascriptissexy.com\/javascript-prototype-in-plain-detailed-language\/<\/a><\/p>\n<p>The roundRect function will use a path to define a rectangle canvas shape with rounded corners. This function will take in the following variables when called:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">x, y, width, height, radius, fill, stroke<\/pre>\n<ul>\n<li>x and y locations for where the roundRect will begin<\/li>\n<li>the width and height of the rectangle to create<\/li>\n<li>the radius of the circle that defines the rounded curves<\/li>\n<li>the color of the fill<\/li>\n<li>the style of the stroke<\/li>\n<\/ul>\n<p>This function works on a canvasContext, which is derived from an HTML canvas. For example, we can call the roundRect function to give the gameCanvas rounded corners with a radius of 40 and a fill color of black:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">canvasContext.roundRect(0, 0, canvas_width, canvas_height, 40, \"black\");<\/pre>\n<p>The roundRect function is necessary because there are no built-in functions for making a canvas with rounded corners. What the roundRect function does is create a path using the HTML5 canvas <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">beginPath()<\/code>, <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">closePath()<\/code>, <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">moveTo()<\/code>, <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">lineTo()<\/code>, and <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\"><span class=\"co1\">quadraticCurveTo()<\/span><\/code> methods:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">beginPath()\r\n\r\n\/\/ make some connections that define a shape using\r\n\/\/ .moveTo()\r\n\/\/ .lineTo()\r\n\/\/ .quadraticCurveTo()\r\n\r\nclosePath()<\/pre>\n<p>For more information about these canvas methods see:<br \/>\n<a href=\"https:\/\/www.w3schools.com\/tags\/canvas_beginpath.asp\">https:\/\/www.w3schools.com\/tags\/canvas_beginpath.asp<\/a><br \/>\n<a href=\"https:\/\/www.w3schools.com\/tags\/canvas_closepath.asp\">https:\/\/www.w3schools.com\/tags\/canvas_closepath.asp<\/a><br \/>\n<a href=\"https:\/\/www.w3schools.com\/tags\/canvas_moveto.asp\">https:\/\/www.w3schools.com\/tags\/canvas_moveto.asp<\/a><br \/>\n<a href=\"https:\/\/www.w3schools.com\/tags\/canvas_lineto.asp\">https:\/\/www.w3schools.com\/tags\/canvas_lineto.asp<\/a><br \/>\n<a href=\"https:\/\/www.w3schools.com\/tags\/canvas_quadraticcurveto.asp\">https:\/\/www.w3schools.com\/tags\/canvas_quadraticcurveto.asp<\/a><\/p>\n<p>Here is the complete JavaScript code so far (placed in the &lt;script&gt; portion of the HTML document), with comments:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var canvas;\r\n\r\nwindow.onload = function() {\r\n\r\n    canvas = document.getElementById(\"gameCanvas\")\r\n    canvasContext = canvas.getContext(\"2d\");\r\n\r\n    var canvas_width = canvas.width;\r\n    var canvas_height = canvas.height;    \r\n\r\n    CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius, fill, stroke) {\r\n\r\n      \/\/ If stroke argument not provided, provide a stroke by default\r\n      if (typeof stroke == \"undefined\" ) {\r\n        stroke = true;\r\n      }\r\n      \/\/ If no radius is defined, then give it a default of 5\r\n      if (typeof radius === \"undefined\") {\r\n        radius = 5;\r\n      }\r\n\r\n      \/\/ Start of shape definition\r\n      this.beginPath();\r\n\r\n      this.moveTo(x + radius, y);\r\n      \/\/ Draw the top border line\r\n      this.lineTo(x + width - radius, y);\r\n\r\n      \/\/ Draw the top right curve\r\n      this.quadraticCurveTo(x + width, y, x + width, y + radius);\r\n\r\n      \/\/ Draw the right border line\r\n      this.lineTo(x + width, y + height - radius);\r\n\r\n      \/\/ Draw the bottom right curve\r\n      this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);\r\n\r\n      \/\/ Draw the bottom border line\r\n      this.lineTo(x + radius, y + height);\r\n\r\n      \/\/ Draw the bottom left curve\r\n      this.quadraticCurveTo(x, y + height, x, y + height - radius);\r\n\r\n      \/\/ Draw the left border line\r\n      this.lineTo(x, y + radius);\r\n\r\n      \/\/ Draw the final (top left) curve\r\n      this.quadraticCurveTo(x, y, x + radius, y);\r\n\r\n      \/\/ End of shape definition\r\n      this.closePath();\r\n\r\n      \/\/ Draw the shape with a line\r\n      if (stroke) {\r\n        this.stroke();\r\n      }\r\n      \/\/ Fill in the shape with color\r\n      if (fill) {\r\n        this.fill();\r\n      }\r\n    }\r\n\r\n    \/\/ Now call the function\r\n    canvasContext.roundRect(0, 0, canvas_width, canvas_height, 40, \"black\");\r\n\r\n}<\/pre>\n<p>&nbsp;<br \/>\nHere is what the canvas looks like so far:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1225 size-full\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/12\/rounded_corner_canvas.png\" alt=\"\" width=\"407\" height=\"318\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/12\/rounded_corner_canvas.png 407w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/12\/rounded_corner_canvas-300x234.png 300w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is Part 2 of the series where I walk through the steps to create a Pong game in the web browser using JavaScript. Part 1 is here: JavaScript: Intro to Web Game Development &#8211; Part 1: canvas element In this step, I will create the black background for the pong game, but instead of &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2017\/12\/29\/javascript-intro-web-game-development-part-2-canvascontext-rounded-corners\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JavaScript: Intro to Web Game Development &#8211; Part 2: canvasContext with rounded corners<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[82,86,45],"class_list":["post-1199","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-canvas","tag-canvascontext","tag-javascript"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1199"}],"version-history":[{"count":26,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1199\/revisions"}],"predecessor-version":[{"id":1241,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1199\/revisions\/1241"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}