{"id":1177,"date":"2018-05-12T13:00:50","date_gmt":"2018-05-12T13:00:50","guid":{"rendered":"http:\/\/chewett.co.uk\/blog\/?p=1177"},"modified":"2018-05-13T21:06:33","modified_gmt":"2018-05-13T20:06:33","slug":"scaling-sprites-for-pixel-art-with-html5-canvas","status":"publish","type":"post","link":"https:\/\/chewett.co.uk\/blog\/1177\/scaling-sprites-for-pixel-art-with-html5-canvas\/","title":{"rendered":"Scaling Sprites for Pixel Art with HTML5 Canvas"},"content":{"rendered":"

\"\"<\/p>\n

In this blog post, I am showing a simple way of scaling sprites for Pixel Art\u00a0using the HTML5 canvas.<\/p>\n

<\/p>\n

Why we scale up sprites rather than rendering them higher quality<\/h2>\n

When displaying pixel art it\u00a0is originally drawn pixel by pixel at a\u00a0very low resolution and then scaled up from original artwork. During the scaling process the nearest-neighbour algorithm is used and this creates the crisp lines pixel artwork is characterized for.<\/p>\n

By storing them in the original format and scaled up there are file\u00a0size savings and can mean the artwork is very small and fast to load. By doing this there are various performance and memory bonuses.<\/p>\n

Scaling sprites with our canvas<\/h2>\n

Before any scaling is performed I will set up my canvas as before below.<\/p>\n

<canvas id="mainCanvas" width="96" height="96"><\/canvas><\/pre>\n
The important bit here is that I have specified my canvas is 96 by 96 pixels. Below is the sprite I am going to be scaling up, Charizard from Pokemon, which is 96 by 96 pixels.<\/p>\n
\"\"<\/p>\n
In my JavaScript\u00a0first I create the 2d context so I can draw to\u00a0 the canvas like before.<\/p>\n
var canvas = document.getElementById("mainCanvas");\r\nvar context = canvas.getContext("2d");<\/pre>\n
Once the canvas is available I create a new image to load.\u00a0 The onload\u00a0function is set up to draw image as soon as it has loaded. Once I have set up the onload\u00a0handler I then tell it to load the PNG file.<\/p>\n
var charizardImg = new Image();\r\ncharizardImg.onload = function() {\r\n context.drawImage(charizardImg, 0, 0)\r\n};\r\ncharizardImg.src = "charizard.png";<\/pre>\n
With this code we will load the load the image onto the canvas. Now we need to configure the scaling to create our larger sprites.<\/p>\n
<style>\r\n    #mainCanvas {\r\n        width: 384px;\r\n        height: 384px;\r\n        image-rendering: -moz-crisp-edges;\r\n        image-rendering: -webkit-crisp-edges;\r\n        image-rendering: pixelated;\r\n        image-rendering: crisp-edges;\r\n    }\r\n<\/style><\/pre>\n
Using the simple CSS above I have first configured the canvas to be four times the size of the image. By default this will perform standard scaling and blur our sprites.<\/p>\n
To get around the standard scaling we can use the image-rendering<\/code>\u00a0css\u00a0property. For complete browser compatability\u00a0we give numerous different properties as suggested on the Mozilla Developer Network<\/a>.<\/p>\n
This tells the browser that instead of scaling it using the standard scaling algorithm, that it should use one that suits our sprites. This achieves the scaling we need for our pixel art without blurring the lines.<\/p>\n
The disadvantage of this is that at the moment this is not supported by IE 11 and Edge.<\/p>\n
Conclusions on measuring text with measureText<\/h2>\n
Using this technique we are allowing the browser to scale up the canvas to increase the size of our sprites. This keeps the image size down for both performance and ease of working with the sprites.<\/p>\n
The example including the source code is\u00a0available on my website<\/a>.<\/p>\n
If you have any questions or wish to learn more leave a comment below and I will endeavour to answer any questions.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog post, I am showing a simple way of scaling sprites for Pixel Art\u00a0using the HTML5 canvas.<\/p>\n","protected":false},"author":1,"featured_media":1180,"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 wrote about scaling #Sprites for #PixelArt 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":[98],"tags":[154,155,72,256],"class_list":["post-1177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-html5","tag-html5-canvas","tag-javascript","tag-tutorial"],"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\/05\/scaling_sprites-for_pixel_art.jpg?fit=800%2C800&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p2toWX-iZ","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1186,"url":"https:\/\/chewett.co.uk\/blog\/1186\/exploring-the-many-method-parameters-of-drawimage-with-html5-canvas\/","url_meta":{"origin":1177,"position":0},"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 "Informational"","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":1130,"url":"https:\/\/chewett.co.uk\/blog\/1130\/new-html5-canvas-experiments-and-tutorials-section-of-my-website\/","url_meta":{"origin":1177,"position":1},"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 "Informational"","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":667,"url":"https:\/\/chewett.co.uk\/blog\/667\/html5-canvas-drawing-tutorial-basic-shapes\/","url_meta":{"origin":1177,"position":2},"title":"HTML5 Canvas Drawing Tutorial – 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 "Informational"","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":1166,"url":"https:\/\/chewett.co.uk\/blog\/1166\/better-positioning-of-text-using-measuretext-with-html5-canvas\/","url_meta":{"origin":1177,"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 "Software"","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":1144,"url":"https:\/\/chewett.co.uk\/blog\/1144\/creating-a-loading-progress-bar-animation-with-html5-canvas\/","url_meta":{"origin":1177,"position":4},"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 "Software"","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":1994,"url":"https:\/\/chewett.co.uk\/blog\/1994\/d3-js-version-5-prediction-line-chart\/","url_meta":{"origin":1177,"position":5},"title":"D3.js version 5 Prediction Line Chart","author":"Chewett","date":"February 13, 2019","format":false,"excerpt":"Today I am writing about the Prediction Line Chart I have created in D3.js version 5. Here I provide the full code how to create it yourself and how it works. What is a Prediction Line Chart? A Prediction Line Chart is an extension of a basic line chart where\u2026","rel":"","context":"In "Software"","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\/2019\/02\/d3_v5_prediction_line.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\/2019\/02\/d3_v5_prediction_line.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/d3_v5_prediction_line.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/d3_v5_prediction_line.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1177","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=1177"}],"version-history":[{"count":1,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1177\/revisions"}],"predecessor-version":[{"id":1181,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1177\/revisions\/1181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media\/1180"}],"wp:attachment":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=1177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=1177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=1177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}