{"id":17,"date":"2012-05-08T18:08:45","date_gmt":"2012-05-08T18:08:45","guid":{"rendered":"http:\/\/beta.robertprice.co.uk\/robblog\/2012\/05\/grayscaling_an_html5_canvas-shtml\/"},"modified":"2012-05-08T18:08:45","modified_gmt":"2012-05-08T18:08:45","slug":"grayscaling_an_html5_canvas-shtml","status":"publish","type":"post","link":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/","title":{"rendered":"Grayscaling An HTML5 Canvas"},"content":{"rendered":"

\nI’ve been looking at how to turn a colour image into a grayscale one using JavaScript on an HTML 5 Canvas. I had done something similar a few years back to an image using Perl.\n<\/p>\n

\nWikipedia has a good article on converting colour to grayscale<\/a>, and it’s very simple formula based on the luminance of the image. The recommendation is to add together 30% of the red value, 59% of the green value and 11% of the blue value.\n<\/p>\n

var luma = red * 0.3 + green * 0.59 + blue * 0.11;<\/pre>\n
\nWe can easily apply this formula over the ImageData in an HTML 5 Canvas Context object to turn the image held in the Canvas to grayscale. The ImageData.data<\/var> holds an array with four pieces of data per pixel, the red, the green, the blue and the alpha values. These are integer values between 0 and 255. The code to grayscale the ImageData would look like this.\n<\/p>\n
for (var i = 0; i < imageData.data.length; i+=4) {\n  var luma = Math.floor(imageData.data[i] * 0.3 +\n  imageData.data[i+1] * 0.59 +\n  imageData.data[i+2] * 0.11);\n  imageData.data[i] = imageData.data[i+1] = imageData.data[i+2] = luma;\n  imageData.data[i+3] = 255;\n}<\/pre>\n
\nNotice the use of Math.floor()<\/code>, this is just to round the luminance down into an integer value.\n<\/p>\n
\n\"Colour\"\n<\/p>\n
\n\"Grayscale\"\n<\/p>\n
\nThere is another common way to grayscale an image, and that is to get the red, green and blue pixels to all match. You can pick the colour you want to be the key, for example red, then just make sure the values for the green and blue for each pixel match that of the red one. This is making use of a single channel, and can give very different effects depending on your source image.\n<\/p>\n
\nTo use the red channel we could the following code over some ImageData.\n<\/p>\n
for (var i = 0; i < imageData.data.length; i+=4) {\n  imageData.data[i+1] = imageData.data[i+2] = imageData.data[i];\n  imageData.data[i+3] = 255;\n}<\/pre>\n
\n\"Grayscale\n<\/p>\n
\nTo use the green channel, use the following.\n<\/p>\n
for (var i = 0; i < imageData.data.length; i+=4) {\n  imageData.data[i] = imageData.data[i+2] = imageData.data[i+1];\n  imageData.data[i+3] = 255;\n}<\/pre>\n<\/p>\n
\n\"Grayscale\n<\/p>\n
\nTo use the blue channel, use the following.\n<\/p>\n
for (var i = 0; i < imageData.data.length; i+=4) {\n  imageData.data[i] = imageData.data[i+1] = imageData.data[i+2];\n  imageData.data[i+3] = 255;\n}<\/pre>\n<\/p>\n
\n\"Grayscale<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve been looking at how to turn a colour image into a grayscale one using JavaScript on an HTML 5 Canvas. I had done something similar a few years back to an image using Perl. Wikipedia has a good article on converting colour to grayscale, and it’s very simple formula based on the luminance of … Continue reading “Grayscaling An HTML5 Canvas”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2],"tags":[24,31],"class_list":["post-17","post","type-post","status-publish","format-standard","hentry","category-dev","tag-html5","tag-javascript"],"yoast_head":"\nGrayscaling An HTML5 Canvas - Robert Price<\/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:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grayscaling An HTML5 Canvas - Robert Price\" \/>\n<meta property=\"og:description\" content=\"I’ve been looking at how to turn a colour image into a grayscale one using JavaScript on an HTML 5 Canvas. I had done something similar a few years back to an image using Perl. Wikipedia has a good article on converting colour to grayscale, and it’s very simple formula based on the luminance of … Continue reading "Grayscaling An HTML5 Canvas"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/\" \/>\n<meta property=\"og:site_name\" content=\"Robert Price\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-08T18:08:45+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.robertprice.co.uk\/robblog\/images\/khyber_colour.jpg\" \/>\n<meta name=\"author\" content=\"rob\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rob\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/grayscaling_an_html5_canvas-shtml\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/grayscaling_an_html5_canvas-shtml\\\/\"},\"author\":{\"name\":\"rob\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"headline\":\"Grayscaling An HTML5 Canvas\",\"datePublished\":\"2012-05-08T18:08:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/grayscaling_an_html5_canvas-shtml\\\/\"},\"wordCount\":266,\"image\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/grayscaling_an_html5_canvas-shtml\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/images\\\/khyber_colour.jpg\",\"keywords\":[\"HTML5\",\"JavaScript\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/grayscaling_an_html5_canvas-shtml\\\/\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/grayscaling_an_html5_canvas-shtml\\\/\",\"name\":\"Grayscaling An HTML5 Canvas - Robert Price\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/grayscaling_an_html5_canvas-shtml\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/grayscaling_an_html5_canvas-shtml\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/images\\\/khyber_colour.jpg\",\"datePublished\":\"2012-05-08T18:08:45+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/grayscaling_an_html5_canvas-shtml\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/grayscaling_an_html5_canvas-shtml\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/grayscaling_an_html5_canvas-shtml\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/images\\\/khyber_colour.jpg\",\"contentUrl\":\"http:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/images\\\/khyber_colour.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/grayscaling_an_html5_canvas-shtml\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Grayscaling An HTML5 Canvas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\",\"name\":\"Robert Price\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\",\"name\":\"rob\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"caption\":\"rob\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Grayscaling An HTML5 Canvas - Robert Price","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.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/","og_locale":"en_GB","og_type":"article","og_title":"Grayscaling An HTML5 Canvas - Robert Price","og_description":"I’ve been looking at how to turn a colour image into a grayscale one using JavaScript on an HTML 5 Canvas. I had done something similar a few years back to an image using Perl. Wikipedia has a good article on converting colour to grayscale, and it’s very simple formula based on the luminance of … Continue reading \"Grayscaling An HTML5 Canvas\"","og_url":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/","og_site_name":"Robert Price","article_published_time":"2012-05-08T18:08:45+00:00","og_image":[{"url":"http:\/\/www.robertprice.co.uk\/robblog\/images\/khyber_colour.jpg","type":"","width":"","height":""}],"author":"rob","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rob","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/#article","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/"},"author":{"name":"rob","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"headline":"Grayscaling An HTML5 Canvas","datePublished":"2012-05-08T18:08:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/"},"wordCount":266,"image":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/#primaryimage"},"thumbnailUrl":"http:\/\/www.robertprice.co.uk\/robblog\/images\/khyber_colour.jpg","keywords":["HTML5","JavaScript"],"articleSection":["Dev"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/","url":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/","name":"Grayscaling An HTML5 Canvas - Robert Price","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/#primaryimage"},"image":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/#primaryimage"},"thumbnailUrl":"http:\/\/www.robertprice.co.uk\/robblog\/images\/khyber_colour.jpg","datePublished":"2012-05-08T18:08:45+00:00","author":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"breadcrumb":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/#primaryimage","url":"http:\/\/www.robertprice.co.uk\/robblog\/images\/khyber_colour.jpg","contentUrl":"http:\/\/www.robertprice.co.uk\/robblog\/images\/khyber_colour.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.robertprice.co.uk\/robblog\/grayscaling_an_html5_canvas-shtml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.robertprice.co.uk\/robblog\/"},{"@type":"ListItem","position":2,"name":"Grayscaling An HTML5 Canvas"}]},{"@type":"WebSite","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website","url":"https:\/\/www.robertprice.co.uk\/robblog\/","name":"Robert Price","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.robertprice.co.uk\/robblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5","name":"rob","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","caption":"rob"}}]}},"_links":{"self":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":0,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}