{"id":1130,"date":"2018-04-21T13:00:18","date_gmt":"2018-04-21T12:00:18","guid":{"rendered":"http:\/\/chewett.co.uk\/blog\/?p=1130"},"modified":"2018-04-24T23:26:49","modified_gmt":"2018-04-24T22:26:49","slug":"new-html5-canvas-experiments-and-tutorials-section-of-my-website","status":"publish","type":"post","link":"https:\/\/chewett.co.uk\/blog\/1130\/new-html5-canvas-experiments-and-tutorials-section-of-my-website\/","title":{"rendered":"New HTML5 Canvas Experiments and tutorials section of my website"},"content":{"rendered":"<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1134\" data-permalink=\"https:\/\/chewett.co.uk\/blog\/1130\/new-html5-canvas-experiments-and-tutorials-section-of-my-website\/new_html5_section\/\" data-orig-file=\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/new_html5_section.jpg?fit=800%2C300&amp;ssl=1\" data-orig-size=\"800,300\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"new_html5_section\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/new_html5_section.jpg?fit=300%2C113&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/new_html5_section.jpg?fit=678%2C254&amp;ssl=1\" class=\"aligncenter wp-image-1134 size-full\" src=\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/new_html5_section.jpg?resize=678%2C254\" alt=\"\" width=\"678\" height=\"254\" srcset=\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/new_html5_section.jpg?w=800&amp;ssl=1 800w, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/new_html5_section.jpg?resize=300%2C113&amp;ssl=1 300w, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/new_html5_section.jpg?resize=768%2C288&amp;ssl=1 768w, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/new_html5_section.jpg?resize=50%2C19&amp;ssl=1 50w\" sizes=\"auto, (max-width: 678px) 100vw, 678px\" \/><\/p>\n<p>This post talks about the new HTML5 Canvas part of my website and what I plan to do with it.<\/p>\n<p><!--more--><\/p>\n<h2>The new page on my website!<\/h2>\n<p>I have added a link on the\u00a0<a href=\"https:\/\/chewett.co.uk\/\">homepage of my website<\/a>\u00a0to the\u00a0<a href=\"https:\/\/chewett.co.uk\/html5_canvas\/\">new HTML5 canvas experiments and tutorials section<\/a>. Here you will be able to view all my HTML5 experiments and tutorials.<\/p>\n<h2>The plan for the website<\/h2>\n<p>As I slowly learn more about the HTML5 canvas API I am planning to make a number of tutorials and experiments. This is to act as a study aid to reinforce my learning and a guide for others following a similar path.<\/p>\n<p>One of the main objectives for learning HTML5 canvas is to replace some of the flash animations in MagicDuel.<\/p>\n<p>Some of the ideas I am looking to implement are:<\/p>\n<ul>\n<li>Moving an object around a container<\/li>\n<li>Simple circular progress indicator<\/li>\n<li>Simple Mandelbrot fractal viewer<\/li>\n<li>Genetic algorithm visualising\u00a0creatures moving towards an objective<\/li>\n<\/ul>\n<p>These start from a quite simple box moving around a container to the more complex genetic algorithm based creatures moving to an objective.<\/p>\n<p>In some of the cases above, I will be using the canvas animation to visually demonstrate more complex code such as a genetic algorithm.<\/p>\n<p>In addition to the various experiments above I will intersperse them with some more basic tutorials. These will be discussing some common graphics techniques such as offscreen rendering which we can utilise with the HTML5 canvas.<\/p>\n<p>The <a href=\"https:\/\/chewett.co.uk\/blog\/667\/html5-canvas-drawing-tutorial-basic-shapes\/\">first tutorial has already been posted<\/a> and I am going to be posting more in the near future.<\/p>\n<p>I will be blogging as I add more content to this part of the site. If you have an idea I could work on or have any suggestions contact me or leave a comment below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post talks about the new HTML5 Canvas part of my website and what I plan to do with it.<\/p>\n","protected":false},"author":1,"featured_media":1132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Iv added a new part to my website talking about #HTML5 #Canvas!","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5],"tags":[154,155,72],"class_list":["post-1130","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-informational","tag-html5","tag-html5-canvas","tag-javascript"],"wppr_data":{"cwp_meta_box_check":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/new_html5_canvas_part_of_website.jpg?fit=800%2C800&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p2toWX-ie","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1177,"url":"https:\/\/chewett.co.uk\/blog\/1177\/scaling-sprites-for-pixel-art-with-html5-canvas\/","url_meta":{"origin":1130,"position":0},"title":"Scaling Sprites for Pixel Art with HTML5 Canvas","author":"Chewett","date":"May 12, 2018","format":false,"excerpt":"In this blog post, I am showing a simple way of scaling sprites for Pixel Art\u00a0using the HTML5 canvas. Why we scale up sprites rather than rendering them higher quality When displaying pixel art it\u00a0is originally drawn pixel by pixel at a\u00a0very low resolution and then scaled up from original\u2026","rel":"","context":"In &quot;Software&quot;","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/scaling_sprites-for_pixel_art.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/scaling_sprites-for_pixel_art.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/scaling_sprites-for_pixel_art.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/scaling_sprites-for_pixel_art.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1166,"url":"https:\/\/chewett.co.uk\/blog\/1166\/better-positioning-of-text-using-measuretext-with-html5-canvas\/","url_meta":{"origin":1130,"position":1},"title":"Better positioning of text using measureText with HTML5 Canvas","author":"Chewett","date":"May 5, 2018","format":false,"excerpt":"In this tutorial I am extending the previous animation example by better positioning the text using measureText with the HTML5 canvas. The problem with positioning text When positioning\u00a0text you will sometimes want to know the width and height so that you can centre it on the canvas. However this isn't\u2026","rel":"","context":"In &quot;Software&quot;","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/measure_text_html5_canvas.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/measure_text_html5_canvas.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/measure_text_html5_canvas.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/05\/measure_text_html5_canvas.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":667,"url":"https:\/\/chewett.co.uk\/blog\/667\/html5-canvas-drawing-tutorial-basic-shapes\/","url_meta":{"origin":1130,"position":2},"title":"HTML5 Canvas Drawing Tutorial &#8211; Basic Shapes","author":"Chewett","date":"September 27, 2017","format":false,"excerpt":"This post is the first in a series of blog posts where I explore the HTML5 canvas. This first tutorial looks at creating the basic elements required to draw on a canvas and drawing some basic shapes. Creating and styling the canvas The first step to creating an HTML5 canvas\u2026","rel":"","context":"In &quot;Informational&quot;","block_context":{"text":"Informational","link":"https:\/\/chewett.co.uk\/blog\/category\/informational\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/09\/html5_canvas_basic_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/09\/html5_canvas_basic_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/09\/html5_canvas_basic_shapes.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2017\/09\/html5_canvas_basic_shapes.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1144,"url":"https:\/\/chewett.co.uk\/blog\/1144\/creating-a-loading-progress-bar-animation-with-html5-canvas\/","url_meta":{"origin":1130,"position":3},"title":"Creating a loading progress bar animation with HTML5 Canvas","author":"Chewett","date":"April 28, 2018","format":false,"excerpt":"In this HTML5 canvas example I create a simple loading progress bar demonstrating how you can use animation in a canvas. Creating an animation function Like all animation, the HTML5 canvas can create moving images by rapidly changing the image you are viewing. This is done by having a function\u2026","rel":"","context":"In &quot;Software&quot;","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/loading_progress_bar_animation_html5.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/loading_progress_bar_animation_html5.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/loading_progress_bar_animation_html5.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/04\/loading_progress_bar_animation_html5.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1186,"url":"https:\/\/chewett.co.uk\/blog\/1186\/exploring-the-many-method-parameters-of-drawimage-with-html5-canvas\/","url_meta":{"origin":1130,"position":4},"title":"Exploring the many method parameters of drawImage with HTML5 Canvas","author":"Chewett","date":"May 30, 2018","format":false,"excerpt":"In this post I look at the different method parameters that can be used with drawImage and what they are useful for. Whats the use for different parameters of drawImage The context drawImage function allows for creating more complex canvas scenes by allowing you to draw different images at various\u2026","rel":"","context":"In &quot;Informational&quot;","block_context":{"text":"Informational","link":"https:\/\/chewett.co.uk\/blog\/category\/informational\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/drawImage_methods.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/drawImage_methods.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/drawImage_methods.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/drawImage_methods.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1054,"url":"https:\/\/chewett.co.uk\/blog\/1054\/raspberry-pi-tutorial-website-online-now\/","url_meta":{"origin":1130,"position":5},"title":"Raspberry Pi Tutorial Website online now!","author":"Chewett","date":"March 10, 2018","format":false,"excerpt":"This post talks about the new page on my website with linking to all my Raspberry Pi Cluster tutorials. Raspberry Pi Cluster Tutorial Webpage Now I have a couple Raspberry Pi Cluster tutorials I decided to link to all of them on my website. This will form the basis of\u2026","rel":"","context":"In &quot;Raspberry Pi Cluster&quot;","block_context":{"text":"Raspberry Pi Cluster","link":"https:\/\/chewett.co.uk\/blog\/category\/raspberry-pi-cluster\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/03\/rpi_tutorial_website_online.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/03\/rpi_tutorial_website_online.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/03\/rpi_tutorial_website_online.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/03\/rpi_tutorial_website_online.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=1130"}],"version-history":[{"count":4,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1130\/revisions"}],"predecessor-version":[{"id":1137,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1130\/revisions\/1137"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media\/1132"}],"wp:attachment":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=1130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=1130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=1130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}