{"id":3218,"date":"2019-08-26T08:21:06","date_gmt":"2019-08-26T08:21:06","guid":{"rendered":"https:\/\/www.folio3.com\/mobile\/?p=3218"},"modified":"2020-03-26T17:44:47","modified_gmt":"2020-03-26T17:44:47","slug":"how-to-make-use-of-html-5-canvas-with-react","status":"publish","type":"post","link":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/","title":{"rendered":"How to make use of HTML5 Canvas with React"},"content":{"rendered":"\n

In this blog, we are going to learn how can we draw an image and write text on HTML5 canvas element using React.<\/p>\n\n\n\n

Wait! What is Canvas?<\/strong><\/p>\n\n\n\n

It\u2019s an HTML element that is used to draw graphics on a web page. The element is only a container for the graphics; we use JavaScript to actually \u201cdraw\u201d the graphics onto the canvas.<\/p>\n\n\n\n

Basic setup!!!<\/strong><\/p>\n\n\n\n

We\u2019ll start by creating a new React app using create-react-app. Just create a new folder and open your terminal there and type following commands<\/p>\n\n\n\n

> npx create-react-app canvas-on-react\n> cd canvas-on-react\n> npm start<\/code><\/pre>\n\n\n\n
Your browser should open http:\/\/localhost:3000\/<\/a> and you should see a spinning React logo. You\u2019re now ready to go!<\/p>\n\n\n\n
Let’s get started:<\/strong><\/p>\n\n\n\n
Open the file src\/App.js in your favorite editor and replace the contents with the following code:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Here, I have imported and rendered my custom Canvas component which I will show you later.<\/p>\n\n\n\n
I am passing some props to my Canvas component <\/p>\n\n\n\n
– imageToShow: This will be the image you want to draw inside canvas <\/p>\n\n\n\n
– textToShow: Text which you want to show inside that image <\/p>\n\n\n\n
– width: width of canvas<\/p>\n\n\n\n
– height: height of canvas<\/p>\n\n\n\n
The Canvas Component:<\/strong><\/p>\n\n\n\n
There are two main elements inside this component, the image element, and the canvas element.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Both elements have a ref attribute. This is how we\u2019ll access the elements later on. (If we were using plain JavaScript, we could do something like document.getElementById(\u201ccanvas\u201d). Since we\u2019re using React, we need another way to access the elements.)<\/p>\n\n\n\n
We want to draw the image on canvas on mounting phase. For that purpose, we are going to use REACT lifecycle hook “ComponentDidMount”.<\/p>\n\n\n\n
You need to insert the following line of code inside ComponentDidMount lifecycle and you are good to go.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Let\u2019s walk through those new lines of code:<\/strong><\/p>\n\n\n\n
First, find the <canvas> element and save it to a variable.<\/p>\n\n\n\n
                 const canvas = this.refs.canvas<\/strong><\/p>\n\n\n\n
Create a drawing object for our canvas and save\nit to a variable. This drawing object is what we\u2019ll actually be drawing on.<\/p>\n\n\n\n
                  const ctx = canvas.getContext(“2d”)<\/strong><\/p>\n\n\n\n
Find the <img> element and save it to a\nvariable.<\/p>\n\n\n\n
                 \nconst img = this.refs.img<\/strong><\/p>\n\n\n\n
After saving the reference of all the elements, its time to draw our canvas.<\/strong><\/p>\n\n\n\n
Firstly, use image onload event to wait and start drawing after the <img> element has finished loading. <\/p>\n\n\n\n
                 img.onload = () => {\u2026}<\/strong><\/p>\n\n\n\n
Then use the drawImage(image,x,y) method to draw our image starting at the top left corner of the canvas. The drawImage takes 3 parameters.<\/p>\n\n\n\n
1. Image to draw<\/p>\n\n\n\n
2. X-axis position<\/p>\n\n\n\n
3. Y-axis position<\/p>\n\n\n\n
                ctx.drawImage(img,\n0, 0)<\/strong><\/p>\n\n\n\n
This will draw the image on the canvas. Now its time to insert some text into it.<\/strong><\/p>\n\n\n\n
Setting the font properties for the text we are about to draw using the font method.<\/strong><\/p>\n\n\n\n
                ctx.font = \u201c40px Courier\u201d<\/strong><\/p>\n\n\n\n
Lastly fill the text by ,<\/p>\n\n\n\n
                 ctx.fillText(this.props.text, 10, 180)<\/strong><\/p>\n\n\n\n
Here we are using the fillText(text,x,y) method to draw our text. (As you can see, we\u2019re getting our text from the props that were passed down from the parent component. In this example, this.props.text is \u201cAn untold story\u201d).<\/p>\n\n\n\n
Final Result:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
You can see you now have one “single graphic element”<\/strong> on your web page. All you need is just to use this canvas component anywhere!!<\/p>\n\n\n\n
If you want to save this canvas on some server ,\nyou can turn it into a dataURL by this single line of code <\/p>\n\n\n\n
         const\ndataURL = canvas.toDataURL()<\/strong><\/p>\n\n\n\n
The result is a 64 bit encoded PNG URL which you save on any server. When you want to display the image on a web page, the string becomes the src of your <img> element.<\/p>\n\n\n\n
For example, let\u2019s say we just retrieved this\nlong data URL string from a database or wherever and saved it in a variable\ncalled image. The JSX to display the image would be:<\/p>\n\n\n\n
                <img src={image} \/><\/strong><\/p>\n\n\n\n
Wrapping Up:<\/strong><\/p>\n\n\n\n
You can do many things using the HTML5 canvas element. I made this blog so that you have an idea that how we can use it and integrate it into any REACT application.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, we are going to learn how can we draw an image and write text on HTML5 canvas element using React. Wait! What is Canvas? It\u2019s an HTML element that is used to draw graphics on a web page. The element is only a container for the graphics; we use JavaScript to actually … Continue reading “How to make use of HTML5 Canvas with React”<\/span><\/a><\/p>\n","protected":false},"author":37,"featured_media":3284,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3218","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"yoast_head":"\nWhat is react canvas, React Native Canvas draw image with HTML5<\/title>\n<meta name=\"description\" content=\"This blog will help you to refine your skills from how can we draw an image to write text on HTML5 canvas element using React.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is react canvas, React Native Canvas draw image with HTML5\" \/>\n<meta property=\"og:description\" content=\"This blog will help you to refine your skills from how can we draw an image to write text on HTML5 canvas element using React.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Mobile App Development Services\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-26T08:21:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-26T17:44:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/08\/Untitled-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Noc Folio3\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noc Folio3\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/\"},\"author\":{\"name\":\"Noc Folio3\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\"},\"headline\":\"How to make use of HTML5 Canvas with React\",\"datePublished\":\"2019-08-26T08:21:06+00:00\",\"dateModified\":\"2020-03-26T17:44:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/\"},\"wordCount\":833,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/08\/Untitled-1.jpg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/\",\"name\":\"What is react canvas, React Native Canvas draw image with HTML5\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/08\/Untitled-1.jpg\",\"datePublished\":\"2019-08-26T08:21:06+00:00\",\"dateModified\":\"2020-03-26T17:44:47+00:00\",\"description\":\"This blog will help you to refine your skills from how can we draw an image to write text on HTML5 canvas element using React.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#primaryimage\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/08\/Untitled-1.jpg\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/08\/Untitled-1.jpg\",\"width\":\"1920\",\"height\":\"900\",\"caption\":\"HTML5 App Development\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.folio3.com\/mobile\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to make use of HTML5 Canvas with React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"name\":\"Mobile App Development Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\",\"name\":\"Mobile App Development Services\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"width\":210,\"height\":50,\"caption\":\"Mobile App Development Services\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\",\"name\":\"Noc Folio3\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"caption\":\"Noc Folio3\"},\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is react canvas, React Native Canvas draw image with HTML5","description":"This blog will help you to refine your skills from how can we draw an image to write text on HTML5 canvas element using React.","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:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/","og_locale":"en_US","og_type":"article","og_title":"What is react canvas, React Native Canvas draw image with HTML5","og_description":"This blog will help you to refine your skills from how can we draw an image to write text on HTML5 canvas element using React.","og_url":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/","og_site_name":"Mobile App Development Services","article_published_time":"2019-08-26T08:21:06+00:00","article_modified_time":"2020-03-26T17:44:47+00:00","og_image":[{"width":1920,"height":900,"url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/08\/Untitled-1.jpg","type":"image\/jpeg"}],"author":"Noc Folio3","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Noc Folio3","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#article","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/"},"author":{"name":"Noc Folio3","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb"},"headline":"How to make use of HTML5 Canvas with React","datePublished":"2019-08-26T08:21:06+00:00","dateModified":"2020-03-26T17:44:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/"},"wordCount":833,"commentCount":0,"publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/08\/Untitled-1.jpg","articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/","url":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/","name":"What is react canvas, React Native Canvas draw image with HTML5","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#primaryimage"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/08\/Untitled-1.jpg","datePublished":"2019-08-26T08:21:06+00:00","dateModified":"2020-03-26T17:44:47+00:00","description":"This blog will help you to refine your skills from how can we draw an image to write text on HTML5 canvas element using React.","breadcrumb":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#primaryimage","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/08\/Untitled-1.jpg","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2019\/08\/Untitled-1.jpg","width":"1920","height":"900","caption":"HTML5 App Development"},{"@type":"BreadcrumbList","@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-make-use-of-html-5-canvas-with-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.folio3.com\/mobile\/"},{"@type":"ListItem","position":2,"name":"How to make use of HTML5 Canvas with React"}]},{"@type":"WebSite","@id":"https:\/\/www.folio3.com\/mobile\/#website","url":"https:\/\/www.folio3.com\/mobile\/","name":"Mobile App Development Services","description":"","publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.folio3.com\/mobile\/#organization","name":"Mobile App Development Services","url":"https:\/\/www.folio3.com\/mobile\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","width":210,"height":50,"caption":"Mobile App Development Services"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb","name":"Noc Folio3","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","caption":"Noc Folio3"},"url":"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/3218"}],"collection":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/comments?post=3218"}],"version-history":[{"count":8,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/3218\/revisions"}],"predecessor-version":[{"id":4883,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/3218\/revisions\/4883"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media\/3284"}],"wp:attachment":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media?parent=3218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/categories?post=3218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/tags?post=3218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}