{"id":1186,"date":"2018-05-30T13:00:04","date_gmt":"2018-05-30T13:00:04","guid":{"rendered":"http:\/\/chewett.co.uk\/blog\/?p=1186"},"modified":"2018-06-02T22:43:53","modified_gmt":"2018-06-02T21:43:53","slug":"exploring-the-many-method-parameters-of-drawimage-with-html5-canvas","status":"publish","type":"post","link":"https:\/\/chewett.co.uk\/blog\/1186\/exploring-the-many-method-parameters-of-drawimage-with-html5-canvas\/","title":{"rendered":"Exploring the many method parameters of drawImage with HTML5 Canvas"},"content":{"rendered":"<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1219\" data-permalink=\"https:\/\/chewett.co.uk\/blog\/1186\/exploring-the-many-method-parameters-of-drawimage-with-html5-canvas\/exploring_drawimage\/\" data-orig-file=\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/exploring_drawImage.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=\"exploring_drawImage\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/exploring_drawImage.jpg?fit=300%2C113&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/exploring_drawImage.jpg?fit=678%2C254&amp;ssl=1\" class=\"aligncenter size-full wp-image-1219\" src=\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/exploring_drawImage.jpg?resize=678%2C254\" alt=\"\" width=\"678\" height=\"254\" srcset=\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/exploring_drawImage.jpg?w=800&amp;ssl=1 800w, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/exploring_drawImage.jpg?resize=300%2C113&amp;ssl=1 300w, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/exploring_drawImage.jpg?resize=768%2C288&amp;ssl=1 768w, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/06\/exploring_drawImage.jpg?resize=50%2C19&amp;ssl=1 50w\" sizes=\"auto, (max-width: 678px) 100vw, 678px\" \/><\/p>\n<p>In this post I look at the different method parameters that can be used with drawImage and what they are useful for.<\/p>\n<p><!--more--><\/p>\n<h2>Whats the use for different parameters of drawImage<\/h2>\n<p>The context drawImage function allows for creating more complex canvas scenes by allowing you to draw different images at various positions or sizes.<\/p>\n<p>These can either be drawing images from another canvas,\u00a0loaded image files, or one of the various other supported elements. The basic <code>drawImage<\/code> function call allows adding the drawn image to the canvas at a specific location. the other more advanced forms allow setting the width and only selecting a part of the source image.<\/p>\n<h2>Simple Drawing &#8211; drawImage(image, x, y)<\/h2>\n<p>The simplest\u00a0way of drawing an image is using three parameters.<\/p>\n<pre>drawImage(image, x, y)<\/pre>\n<ul>\n<li><code>image<\/code> &#8211; allows setting of the image\/canvas that you want to draw from. This will be the image that will be drawn by your context.<\/li>\n<li><code>x<\/code> &#8211; is the x position that that context will start drawing from<\/li>\n<li><code>y<\/code> &#8211;\u00a0is the y position that that context will start drawing from<\/li>\n<\/ul>\n<p>This allows drawing a specific image with the context at a specific point. When using this method the full image will be drawn by the context. The image width and height will be preserved.<\/p>\n<h2>Drawing specifying width and height &#8211; drawImage(image, x, y, width, height)<\/h2>\n<p>By adding two more parameters to <code>drawImage<\/code> you can specify the width and height of the image drawn onto the canvas.<\/p>\n<pre>drawImage(image, x, y, width, height)<\/pre>\n<ul>\n<li><code>image<\/code> &#8211; allows setting of the image\/canvas that you want to draw from. This will be the image that will be drawn by your context.<\/li>\n<li><code>x<\/code> &#8211; is the x position that that context will start drawing from<\/li>\n<li><code>y<\/code> &#8211;\u00a0is the y position that that context will start drawing from<\/li>\n<li><code>width<\/code> &#8211; allows customization of the\u00a0width of the image drawn\u00a0by the context. Setting anything but the\u00a0origins default width\u00a0will\u00a0involve\u00a0scaling the image to fit the new width.<\/li>\n<li><code>height<\/code> &#8211; allows customization of the\u00a0height of the image drawn\u00a0by the context. Setting anything but the\u00a0origins default height will\u00a0involve\u00a0scaling the image to fit the new height.<\/li>\n<\/ul>\n<p>Using width and height allows custom scaling of the image before it is drawn to the canvas. Setting the width and height to the width and height of the passed in image will have this function work as if you have called it without the width and height parameters.<\/p>\n<p>Using this with the width and height will allow you to scale your assets as required.<\/p>\n<h2>Drawing specifying all dimensions &#8211; drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, x, y, width, height)<\/h2>\n<p>The third and most expressive set of parameters allows customizing the section of the\u00a0image you sample from your source.<\/p>\n<pre>drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, x, y, width, height)<\/pre>\n<ul>\n<li><code>image<\/code> &#8211; allows setting of the image\/canvas that you want to draw from. This will be the image that will be drawn by your context.<\/li>\n<li><code>sourceX<\/code> &#8211; The x position of the source element to start sampling from<\/li>\n<li><code>sourceY<\/code> &#8211; The y position of the source element to start sampling from<\/li>\n<li><code>sourceWidth<\/code> &#8211; The width from the x position to sample from<\/li>\n<li><code>sourceHeight<\/code> &#8211; The height from the y position to sample from<\/li>\n<li><code>x<\/code> &#8211; is the x position that that context will start drawing from<\/li>\n<li><code>y<\/code> &#8211;\u00a0is the y position that that context will start drawing from<\/li>\n<li><code>width<\/code> &#8211; allows customization of the\u00a0width of the image drawn\u00a0by the context. Setting anything but the\u00a0origins default width\u00a0will\u00a0involve\u00a0scaling the image to fit the new width.<\/li>\n<li><code>height<\/code> &#8211; allows customization of the\u00a0height of the image drawn\u00a0by the context. Setting anything but the\u00a0origins default height will\u00a0involve\u00a0scaling the image to fit the new height.<\/li>\n<\/ul>\n<p>Here we are able to define precisely what part of the source image we want to draw to the canvas. Again if you set the source x and y to be 0, and the source height and width to be the height and width of the source image,\u00a0 it will operate the same as the above parameter set.<\/p>\n<p>One use of this extended set of parameters is to easily allow for sprite sheets. These are image files storing multiple images designed to be cut apart in your program. Here you will always want to select a specific part of the source canvas.<\/p>\n<h2>Summary<\/h2>\n<p>We have three different ways that we can draw images to the canvas using the <code>drawImage<\/code> function. Depending on your use case all three may be used in different parts of your program. Each giving another level of expressiveness when layering the images onto a canvas.<\/p>\n<p>Even with the most expressive parameter set we can set the parameters to draw as if it were the most basic. In the background when this function is called with less parameters the others are calculated and filled in.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post I look at the different method parameters that can be used with drawImage and what they are useful for.<\/p>\n","protected":false},"author":1,"featured_media":1218,"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":"Today I am exploring the many method parameters of drawImage with #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,98],"tags":[154,155,72],"class_list":["post-1186","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-informational","category-software","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\/06\/drawImage_methods.jpg?fit=800%2C800&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p2toWX-j8","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":667,"url":"https:\/\/chewett.co.uk\/blog\/667\/html5-canvas-drawing-tutorial-basic-shapes\/","url_meta":{"origin":1186,"position":0},"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":1186,"position":1},"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":1177,"url":"https:\/\/chewett.co.uk\/blog\/1177\/scaling-sprites-for-pixel-art-with-html5-canvas\/","url_meta":{"origin":1186,"position":2},"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":1186,"position":3},"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":1130,"url":"https:\/\/chewett.co.uk\/blog\/1130\/new-html5-canvas-experiments-and-tutorials-section-of-my-website\/","url_meta":{"origin":1186,"position":4},"title":"New HTML5 Canvas Experiments and tutorials section of my website","author":"Chewett","date":"April 21, 2018","format":false,"excerpt":"This post talks about the new HTML5 Canvas part of my website and what I plan to do with it. The new page on my website! I have added a link on the\u00a0homepage of my website\u00a0to the\u00a0new HTML5 canvas experiments and tutorials section. Here you will be able to view\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\/04\/new_html5_canvas_part_of_website.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\/new_html5_canvas_part_of_website.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, 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&resize=525%2C300 1.5x, 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&resize=700%2C400 2x"},"classes":[]},{"id":1517,"url":"https:\/\/chewett.co.uk\/blog\/1517\/128x32-i2c-ssd1306-oled-display-module-screen-for-arduino-review-and-code\/","url_meta":{"origin":1186,"position":5},"title":"128&#215;32 I2C\u00a0SSD1306 OLED Display Module Screen for Arduino Review and Code","author":"Chewett","date":"September 29, 2018","format":false,"excerpt":"Today I review the 128x32\u00a0I2C\u00a0SSD1306 OLED Display Module Screen for Arduino and provide example code. Overview of the 128x32\u00a0I2C\u00a0SSD1306 OLED Display Module This OLED display module allows you to display any content you want on a small display screen. This unit is a single colour display. Using OLED technology this\u2026","rel":"","context":"In &quot;Electronics&quot;","block_context":{"text":"Electronics","link":"https:\/\/chewett.co.uk\/blog\/category\/electronics\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/09\/128x32_oled_post_icon.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\/09\/128x32_oled_post_icon.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/09\/128x32_oled_post_icon.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/09\/128x32_oled_post_icon.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1186","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=1186"}],"version-history":[{"count":3,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1186\/revisions"}],"predecessor-version":[{"id":1220,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1186\/revisions\/1220"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media\/1218"}],"wp:attachment":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=1186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=1186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=1186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}