{"id":4201,"date":"2022-04-22T11:22:15","date_gmt":"2022-04-22T11:22:15","guid":{"rendered":"https:\/\/www.wikitechy.com\/interview-questions\/?p=4201"},"modified":"2022-04-22T11:23:16","modified_gmt":"2022-04-22T11:23:16","slug":"what-is-the-use-of-canvas-in-html","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/","title":{"rendered":"What is the use of Canvas in HTML ?"},"content":{"rendered":"<ul>\n<li style=\"text-align: justify;\">In HTML the <a href=\"https:\/\/www.wikitechy.com\/step-by-step-html-tutorials\/html5-canvas\/\"><canvas><\/a> tag is used to draw graphics on a web page using JavaScript.<\/li>\n<li style=\"text-align: justify;\">It can be used to draw\u00a0boxes, gradients, texts, paths and adding images.<\/li>\n<li style=\"text-align: justify;\">By default, it does not contain texts and borders.<\/li>\n<li style=\"text-align: justify;\">It allows for scriptable and dynamic\u00a0rendering of 2D shapes and bitmap images.<\/li>\n<li style=\"text-align: justify;\">It does not have a built-in scene and becomes a low level, procedural model that updates a bitmap.<\/li>\n<li style=\"text-align: justify;\">There are several methods using <canvas> tag.<\/li>\n<\/ul>\n<p><strong>For example,<\/strong><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\"><!DOCTYPE html><br\/><html><br\/><body><br\/><br\/><canvas id=&quot;myCanvas&quot; width=&quot;400&quot; height=&quot;250&quot; style=&quot;border:1px solid #d3d3d3;&quot;><br\/>Your browser does not support the HTML canvas tag.<\/canvas><br\/><br\/><script><br\/>var c = document.getElementById(&quot;myCanvas&quot;);<br\/>var ctx = c.getContext(&quot;2d&quot;);<br\/>ctx.font = &quot;30px Arial&quot;;<br\/>ctx.fillText(&quot;Welcome to Wikitechy&quot;,10,50);<br\/><\/script><br\/><br\/><\/body><br\/><\/html><\/code><\/pre> <\/div>\n<p><strong>Output<\/strong><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-4202 aligncenter\" src=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/04\/html-canvas.png\" alt=\"\" width=\"960\" height=\"641\" srcset=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/04\/html-canvas.png 960w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/04\/html-canvas-300x200.png 300w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/04\/html-canvas-768x513.png 768w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/04\/html-canvas-390x260.png 390w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/04\/html-canvas-820x548.png 820w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In HTML the tag is used to draw graphics on a web page using JavaScript. It can be used to draw\u00a0boxes, gradients, texts, paths and adding images. By default, it does not contain texts and borders. It allows for scriptable and dynamic\u00a0rendering of 2D shapes and bitmap images. It does not have a built-in scene [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17079],"tags":[17211,17220,17221,17215,17210,17212,17213,17214,17208,17218,17209,17216,17217,17219],"class_list":["post-4201","post","type-post","status-publish","format-standard","hentry","category-web-designing","tag-canvas-javascript","tag-explain-canvas-in-html5","tag-how-does-html-canvas-work","tag-html-canvas-animation","tag-html-canvas-examples","tag-html-canvas-image","tag-html-canvas-tutorial","tag-html5-canvas-examples-with-source-code","tag-what-is-canvas-in-html","tag-what-is-the-canvas-in-html","tag-what-is-the-usage-of-span-in-html","tag-what-is-the-use-of-canvas-in-html","tag-what-is-the-use-of-canvas-tag-in-html","tag-why-canvas-is-used-in-html5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What is the use of Canvas in HTML ? - Web Designing<\/title>\n<meta name=\"description\" content=\"What is the use of Canvas in HTML ? - In HTML the tag is used to draw graphics on a web page using JavaScript.\u00a0\" \/>\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.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is the use of Canvas in HTML ? - Web Designing\" \/>\n<meta property=\"og:description\" content=\"What is the use of Canvas in HTML ? - In HTML the tag is used to draw graphics on a web page using JavaScript.\u00a0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Wikitechy\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-22T11:22:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-22T11:23:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/04\/html-canvas.png\" \/>\n<meta name=\"author\" content=\"webmaster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"webmaster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-the-use-of-canvas-in-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-the-use-of-canvas-in-html\\\/\"},\"author\":{\"name\":\"webmaster\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\"},\"headline\":\"What is the use of Canvas in HTML ?\",\"datePublished\":\"2022-04-22T11:22:15+00:00\",\"dateModified\":\"2022-04-22T11:23:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-the-use-of-canvas-in-html\\\/\"},\"wordCount\":188,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-the-use-of-canvas-in-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/html-canvas.png\",\"keywords\":[\"canvas javascript\",\"explain canvas in html5\",\"how does html canvas work\",\"html canvas animation\",\"html canvas examples\",\"html canvas image\",\"html canvas tutorial\",\"html5 canvas examples with source code\",\"what is canvas in html\",\"what is the canvas in html\",\"what is the usage of span in html\",\"what is the use of canvas in html\",\"what is the use of canvas tag in html\",\"why canvas is used in html5\"],\"articleSection\":[\"Web Designing\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-the-use-of-canvas-in-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-the-use-of-canvas-in-html\\\/\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-the-use-of-canvas-in-html\\\/\",\"name\":\"What is the use of Canvas in HTML ? - Web Designing\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-the-use-of-canvas-in-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-the-use-of-canvas-in-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/html-canvas.png\",\"datePublished\":\"2022-04-22T11:22:15+00:00\",\"dateModified\":\"2022-04-22T11:23:16+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\"},\"description\":\"What is the use of Canvas in HTML ? - In HTML the tag is used to draw graphics on a web page using JavaScript.\u00a0\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-the-use-of-canvas-in-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-the-use-of-canvas-in-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/html-canvas.png\",\"contentUrl\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/html-canvas.png\",\"width\":960,\"height\":641},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#website\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/\",\"name\":\"Wikitechy\",\"description\":\"Interview Questions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\"],\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/author\\\/webmaster\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is the use of Canvas in HTML ? - Web Designing","description":"What is the use of Canvas in HTML ? - In HTML the tag is used to draw graphics on a web page using JavaScript.\u00a0","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.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/","og_locale":"en_US","og_type":"article","og_title":"What is the use of Canvas in HTML ? - Web Designing","og_description":"What is the use of Canvas in HTML ? - In HTML the tag is used to draw graphics on a web page using JavaScript.\u00a0","og_url":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/","og_site_name":"Wikitechy","article_published_time":"2022-04-22T11:22:15+00:00","article_modified_time":"2022-04-22T11:23:16+00:00","og_image":[{"url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/04\/html-canvas.png","type":"","width":"","height":""}],"author":"webmaster","twitter_card":"summary_large_image","twitter_misc":{"Written by":"webmaster","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/#article","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/"},"author":{"name":"webmaster","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"headline":"What is the use of Canvas in HTML ?","datePublished":"2022-04-22T11:22:15+00:00","dateModified":"2022-04-22T11:23:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/"},"wordCount":188,"commentCount":0,"image":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/04\/html-canvas.png","keywords":["canvas javascript","explain canvas in html5","how does html canvas work","html canvas animation","html canvas examples","html canvas image","html canvas tutorial","html5 canvas examples with source code","what is canvas in html","what is the canvas in html","what is the usage of span in html","what is the use of canvas in html","what is the use of canvas tag in html","why canvas is used in html5"],"articleSection":["Web Designing"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/","url":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/","name":"What is the use of Canvas in HTML ? - Web Designing","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/#primaryimage"},"image":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/04\/html-canvas.png","datePublished":"2022-04-22T11:22:15+00:00","dateModified":"2022-04-22T11:23:16+00:00","author":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"description":"What is the use of Canvas in HTML ? - In HTML the tag is used to draw graphics on a web page using JavaScript.\u00a0","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-the-use-of-canvas-in-html\/#primaryimage","url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/04\/html-canvas.png","contentUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/04\/html-canvas.png","width":960,"height":641},{"@type":"WebSite","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website","url":"https:\/\/www.wikitechy.com\/interview-questions\/","name":"Wikitechy","description":"Interview Questions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4","name":"webmaster","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","caption":"webmaster"},"sameAs":["https:\/\/www.wikitechy.com\/interview-questions"],"url":"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/"}]}},"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/comments?post=4201"}],"version-history":[{"count":2,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4201\/revisions"}],"predecessor-version":[{"id":4204,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4201\/revisions\/4204"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/media?parent=4201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/categories?post=4201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/tags?post=4201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}