{"id":12512,"date":"2014-09-03T13:57:25","date_gmt":"2014-09-03T11:57:25","guid":{"rendered":"https:\/\/blog.trifork.com\/?p=12512"},"modified":"2014-09-03T13:57:25","modified_gmt":"2014-09-03T11:57:25","slug":"html-canvas","status":"publish","type":"post","link":"https:\/\/trifork.nl\/blog\/html-canvas\/","title":{"rendered":"HTML Canvas"},"content":{"rendered":"<p style=\"text-align: justify\"><img loading=\"lazy\" decoding=\"async\" style=\"float: left;margin-right: 10px\" src=\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/09\/Html5_canvas_logo.png\" alt=\"HTML5 Canvas logo\" width=\"90\" height=\"90\" \/><\/p>\n<p style=\"text-align: justify\">During my holiday I start to read about the HTML5 canvas object which can be used for a variety of graphical presentations or animations. Honestly, I was quite surprised about the possibilities of the canvas element. At first I am going to give a short description about the canvas object. Which is followed by a simple canvas example and a small part about how to draw a circle. In the end a conclusion is given.<\/p>\n<p><!--more--><\/p>\n<h2>The Canvas Object<\/h2>\n<p style=\"text-align: justify\">Since HTML5 a canvas element is available to use. It is actually used to draw graphics via JavaScript. Therefore the canvas html5 element is more of a container for a graphical object which will be drawn via JavaScript. A canvas element has just two attributes width and height. By default the width is 300 and the height is 150.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;canvas width='600' height='300'&gt;\n Canvas not supported\n&lt;\/canvas&gt;<\/pre>\n<p>That is all and how can we do the fancy graphic stuff? For that we are using the context of the canvas element which we can obtain in JavaScript with<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar canvas = document.getElementByID(\u2018canvas\u2019);\nvar context = canvas.getContext(\u20182d\u2019);\n<\/pre>\n<p>The context variable is the key to perform graphics with the canvas element. Let us take a look on the attributes of the context.<\/p>\n<ul>\n<li>canvas\n<ul>\n<li>Refers to the canvas. You can change the height and width with it<\/li>\n<\/ul>\n<\/li>\n<li>fillStyle\n<ul>\n<li>A color, gradiant, or pattern uses to fill shapes<\/li>\n<\/ul>\n<\/li>\n<li>font\n<ul>\n<li>Font to use<\/li>\n<\/ul>\n<\/li>\n<li>globalAlpha\n<ul>\n<li>Global Alpha setting is number between 0 and 1.0<\/li>\n<\/ul>\n<\/li>\n<li>globalCompositeOperation\n<ul>\n<li>How the browser draw one thing over another<\/li>\n<\/ul>\n<\/li>\n<li>lineCap\n<ul>\n<li>How the browser draws endpoints of a line<\/li>\n<\/ul>\n<\/li>\n<li>lineWidth\n<ul>\n<li>The width of a line<\/li>\n<\/ul>\n<\/li>\n<li>lineJoin\n<ul>\n<li>How lines are joined when their endpoints meet<\/li>\n<\/ul>\n<\/li>\n<li>miterLimit\n<ul>\n<li>How to draw a miter line join<\/li>\n<\/ul>\n<\/li>\n<li>shadowBlur\n<ul>\n<li>How the browser spreads out shadow<\/li>\n<\/ul>\n<\/li>\n<li>shadowColor\n<ul>\n<li>The color used to draw shadows<\/li>\n<\/ul>\n<\/li>\n<li>shadowOffsetX\n<ul>\n<li>the horizontal offset for shadows<\/li>\n<\/ul>\n<\/li>\n<li>shadowOffsetY\n<ul>\n<li>The vertical offset for shadows<\/li>\n<\/ul>\n<\/li>\n<li>strokeStyle\n<ul>\n<li>the style used to stroke paths<\/li>\n<\/ul>\n<\/li>\n<li>textAlign\n<ul>\n<li>The horizontal placement of text<\/li>\n<\/ul>\n<\/li>\n<li>textBaseline\n<ul>\n<li>The vertical placement of text<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Okay let\u2019s start with creating a simple canvas object.<\/p>\n<h2>A Simple Canvas<\/h2>\n<p>To create a canvas we need a HTML file and a JavaScript file. The HTML file is presented below.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;title&gt;Canvas Simple Example&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;canvas id='canvas' width='600' height='300'&gt;\n    Canvas is not supported\n  &lt;\/canvas&gt;\n  &lt;script src=\u2019example.js\u2019&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n<p>Pretty easy or? And that is how you create a canvas element and give it an id, width, and height. Let us take a look into the example.js file.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar canvas = document.getElementById(\u2018canvas\u2019);\nvar context = canvas.getContext(\u20182d\u2019);\ncontext.fillStyle = \u201cblue\u201d;\ncontext.font = \u201cbold 16px Arial\u201d;\ncontext.fillText(\u201cHello World\u201d, 100, 100);\n<\/pre>\n<p style=\"text-align: justify\">\nThe JavaScript code let you get the canvas element with document.getElementById(\u2018canvas\u2019). In the second row we get the context of the canvas element. The context is the tool that let us draw all kind of shapes and text on the canvas. There are two context which can be obtain the 2d context and the webGl context. The webGl context is more used for 3d animation. The last three rows are specifying the color of the text, the font, and what actually should be printed and on which position on the canvas. As result we have canvas with the height and width of 500 and a text which is blue, bold, 16px, and Arial (see screenshot below).<br \/>\n<a href=\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/08\/Screenshot-2014-08-22-09.01.04.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-12522\" src=\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/08\/Screenshot-2014-08-22-09.01.04-300x300.png\" alt=\"Canvas_Hello_World\" width=\"300\" height=\"300\" srcset=\"https:\/\/trifork.nl\/blog\/wp-content\/uploads\/sites\/3\/2014\/08\/Screenshot-2014-08-22-09.01.04-300x300.png 300w, https:\/\/trifork.nl\/blog\/wp-content\/uploads\/sites\/3\/2014\/08\/Screenshot-2014-08-22-09.01.04-150x150.png 150w, https:\/\/trifork.nl\/blog\/wp-content\/uploads\/sites\/3\/2014\/08\/Screenshot-2014-08-22-09.01.04.png 501w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h2>Drawing shapes<\/h2>\n<p style=\"text-align: justify\">Shapes can be fun and could be used for different kinds of applications and with the canvas element you can create all kind of shapes. Let us create a shape of a circle to show it. At first we need as in the previous example an html page with a canvas element.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;title&gt;Canvas Animation&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;canvas id=\u201dcanvas\u201d width=\u201d500\u201d height=\u201d500\u201d&gt;\n    Canvas not supported\n  &lt;\/canvas&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n<p>Nothing new here now let us create the JavaScript part.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar canvas = document.getElementById(\u2018canvas\u2019);\nvar context = canvas.getContext(\u20182d\u2019);\nvar centerX = canvas.width \/ 2;\nvar centerY = canvas.height \/ 2;\nvar radius = 70;\n\ncontext.beginPath();\ncontext.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);\ncontext.fillStyle = \u2018green\u2019;\ncontext.fill();\ncontext.lineWidth = 5;\ncontext.strokeStyle = \u2018#003300\u2019\ncontext.stroke();\n<\/pre>\n<p style=\"text-align: justify\">\nIn the first two rows we obtain the canvas and context again. Furthermore we calculate the centerX coordinate and the centerY coordinate. The last variable is the radius of the circle. After the initialization of the variables we call the method beginPath() which tells the canvas element that we want to draw something. The next method call arc expects six parameter whereby the last parameter is optional. The function fill() as the name already let suggest fills the circle with the color green. The function stroke()<\/p>\n<p>Our canvas contains a circle now.<br \/>\n<a href=\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/08\/Screenshot-2014-08-22-10.33.02.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-12524\" src=\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/08\/Screenshot-2014-08-22-10.33.02-300x109.png\" alt=\"Canvas_Circle\" width=\"300\" height=\"109\" \/><\/a><\/p>\n<h2>Conclusion<\/h2>\n<p style=\"text-align: justify\">The canvas element is a nice feature if you like to create nice interactive user interfaces. It has a good API which provides a lot of handy features. If I got you inspired I can recommend a book called <a href=\"http:\/\/corehtml5canvas.com\/\">Core HTML canvas<\/a> from David Geary which explains the canvas element complete and shows a lot of use cases you how to use it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>During my holiday I start to read about the HTML5 canvas object which can be used for a variety of graphical presentations or animations. Honestly, I was quite surprised about the possibilities of the canvas element. At first I am going to give a short description about the canvas object. Which is followed by a [&hellip;]<\/p>\n","protected":false},"author":92,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[78,10],"tags":[],"class_list":["post-12512","post","type-post","status-publish","format-standard","hentry","category-frontend","category-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML Canvas - Trifork Blog<\/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:\/\/trifork.nl\/blog\/html-canvas\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Canvas - Trifork Blog\" \/>\n<meta property=\"og:description\" content=\"During my holiday I start to read about the HTML5 canvas object which can be used for a variety of graphical presentations or animations. Honestly, I was quite surprised about the possibilities of the canvas element. At first I am going to give a short description about the canvas object. Which is followed by a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/trifork.nl\/blog\/html-canvas\/\" \/>\n<meta property=\"og:site_name\" content=\"Trifork Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-03T11:57:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/09\/Html5_canvas_logo.png\" \/>\n<meta name=\"author\" content=\"Philipp Darkow\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Philipp Darkow\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/trifork.nl\/blog\/html-canvas\/\",\"url\":\"https:\/\/trifork.nl\/blog\/html-canvas\/\",\"name\":\"HTML Canvas - Trifork Blog\",\"isPartOf\":{\"@id\":\"https:\/\/trifork.nl\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/trifork.nl\/blog\/html-canvas\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/trifork.nl\/blog\/html-canvas\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/09\/Html5_canvas_logo.png\",\"datePublished\":\"2014-09-03T11:57:25+00:00\",\"author\":{\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/f0f730670b3fd7af44d237f16fe86339\"},\"breadcrumb\":{\"@id\":\"https:\/\/trifork.nl\/blog\/html-canvas\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/trifork.nl\/blog\/html-canvas\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/trifork.nl\/blog\/html-canvas\/#primaryimage\",\"url\":\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/09\/Html5_canvas_logo.png\",\"contentUrl\":\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/09\/Html5_canvas_logo.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/trifork.nl\/blog\/html-canvas\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/trifork.nl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Canvas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/trifork.nl\/blog\/#website\",\"url\":\"https:\/\/trifork.nl\/blog\/\",\"name\":\"Trifork Blog\",\"description\":\"Keep updated on the technical solutions Trifork is working on!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/trifork.nl\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/f0f730670b3fd7af44d237f16fe86339\",\"name\":\"Philipp Darkow\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/152ad8e94d7e45cb38952736dafe9c76?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/152ad8e94d7e45cb38952736dafe9c76?s=96&d=mm&r=g\",\"caption\":\"Philipp Darkow\"},\"url\":\"https:\/\/trifork.nl\/blog\/author\/philippd\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Canvas - Trifork Blog","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:\/\/trifork.nl\/blog\/html-canvas\/","og_locale":"en_US","og_type":"article","og_title":"HTML Canvas - Trifork Blog","og_description":"During my holiday I start to read about the HTML5 canvas object which can be used for a variety of graphical presentations or animations. Honestly, I was quite surprised about the possibilities of the canvas element. At first I am going to give a short description about the canvas object. Which is followed by a [&hellip;]","og_url":"https:\/\/trifork.nl\/blog\/html-canvas\/","og_site_name":"Trifork Blog","article_published_time":"2014-09-03T11:57:25+00:00","og_image":[{"url":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/09\/Html5_canvas_logo.png","type":"","width":"","height":""}],"author":"Philipp Darkow","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Philipp Darkow","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/trifork.nl\/blog\/html-canvas\/","url":"https:\/\/trifork.nl\/blog\/html-canvas\/","name":"HTML Canvas - Trifork Blog","isPartOf":{"@id":"https:\/\/trifork.nl\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/trifork.nl\/blog\/html-canvas\/#primaryimage"},"image":{"@id":"https:\/\/trifork.nl\/blog\/html-canvas\/#primaryimage"},"thumbnailUrl":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/09\/Html5_canvas_logo.png","datePublished":"2014-09-03T11:57:25+00:00","author":{"@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/f0f730670b3fd7af44d237f16fe86339"},"breadcrumb":{"@id":"https:\/\/trifork.nl\/blog\/html-canvas\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/trifork.nl\/blog\/html-canvas\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trifork.nl\/blog\/html-canvas\/#primaryimage","url":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/09\/Html5_canvas_logo.png","contentUrl":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/09\/Html5_canvas_logo.png"},{"@type":"BreadcrumbList","@id":"https:\/\/trifork.nl\/blog\/html-canvas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/trifork.nl\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML Canvas"}]},{"@type":"WebSite","@id":"https:\/\/trifork.nl\/blog\/#website","url":"https:\/\/trifork.nl\/blog\/","name":"Trifork Blog","description":"Keep updated on the technical solutions Trifork is working on!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/trifork.nl\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/f0f730670b3fd7af44d237f16fe86339","name":"Philipp Darkow","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/152ad8e94d7e45cb38952736dafe9c76?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/152ad8e94d7e45cb38952736dafe9c76?s=96&d=mm&r=g","caption":"Philipp Darkow"},"url":"https:\/\/trifork.nl\/blog\/author\/philippd\/"}]}},"_links":{"self":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts\/12512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/users\/92"}],"replies":[{"embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/comments?post=12512"}],"version-history":[{"count":0,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts\/12512\/revisions"}],"wp:attachment":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/media?parent=12512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/categories?post=12512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/tags?post=12512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}