{"id":22,"date":"2012-05-03T19:37:27","date_gmt":"2012-05-03T19:37:27","guid":{"rendered":"http:\/\/beta.robertprice.co.uk\/robblog\/2012\/05\/loading_an_image_into_an_html5_canvas-shtml\/"},"modified":"2012-05-03T19:37:27","modified_gmt":"2012-05-03T19:37:27","slug":"loading_an_image_into_an_html5_canvas-shtml","status":"publish","type":"post","link":"https:\/\/www.robertprice.co.uk\/robblog\/loading_an_image_into_an_html5_canvas-shtml\/","title":{"rendered":"Loading An Image Into An HTML5 Canvas"},"content":{"rendered":"

\nAs part of my Draw Something Solver, I need to be able to load an image into an HTML 5 Canvas. I thought I’d share the solution to help others.\n<\/p>\n

\nFirstly, assume you have an HTML page with an empty canvas element called drawsomething<\/var>. Secondly, assume the image you want to load is next to the HTML page and is called testimage.png<\/var>.\n<\/p>\n

\nI’m not usng a framework like jQuery in this example, so the code may a bit verbose.\n<\/p>\n

\nFirstly, you want the code to run when the page has finished loading, the easiest way to do this is to tie into the window.onload event. If yoou were using jQuery or similar, ready<\/code> would be a good point to use.\n<\/p>\n

window.onload = function() {\n  \/\/ code goes here\n}<\/pre>\n
\nNow we need to get the canvas element and it’s context. We can do this with the following code.\n<\/p>\n
var dsCanvas = document.getElementById('drawsomething');\nvar dsCanvasContext = dsCanvas.getContext('2d');\n<\/pre>\n
\nWe need an Image object to load the image into…\n<\/p>\n
var screenshotImage = new Image();\n<\/pre>\n
\nWhen the image has been loaded, we need to draw it into the canvas. Do to this we can hook into the image objects onload<\/code> event and place our canvas manipulation code into an anonymous function that is called when the event triggers.\n<\/p>\n
\nInside the anonymous function, we resize the canvas to the same size as the image and call the canvas context’s drawImage()<\/code> method, passing in the image, it’s start x and y coordinates, and the width and height of the image.\n<\/p>\n
screenshotImage.onload = function() {\n  dsCanvas.width = screenshotImage.width;\n  dsCanvas.height = screenshotImage.height;\n  dsCanvasContext.drawImage(screenshotImage,0,0,screenshotImage.width, screenshotImage.height);\n}\n<\/pre>\n
\nFinally, we assign a filename to the image object’s src<\/var> attribute. This will cause the image object to load the image, and when loaded it will trigger the onload<\/code> event we have just written to draw the image into the canvas.\n<\/p>\n
screenshotImage.src = \"testimage.png\";\n<\/pre>\n
\nThe complete example looks like this…\n<\/p>\n
window.onload = function() {\n  var dsCanvas = document.getElementById('drawsomething');\n  var dsCanvasContext = dsCanvas.getContext('2d');\n  var screenshotImage = new Image();\n  screenshotImage.onload = function() {\n    dsCanvas.width = screenshotImage.width;\n    dsCanvas.height = screenshotImage.height;\n    dsCanvasContext.drawImage(screenshotImage,0,0,screenshotImage.width, screenshotImage.height);\n  }\n  screenshotImage.src = \"testimage.png\";\n}\n<\/pre>\n
\nNext time, I will look at how to manipulate the image that has just been loaded into the canvas.<\/p>\n","protected":false},"excerpt":{"rendered":"
As part of my Draw Something Solver, I need to be able to load an image into an HTML 5 Canvas. I thought I’d share the solution to help others. Firstly, assume you have an HTML page with an empty canvas element called drawsomething. Secondly, assume the image you want to load is next to … Continue reading “Loading An Image Into 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-22","post","type-post","status-publish","format-standard","hentry","category-dev","tag-html5","tag-javascript"],"yoast_head":"\nLoading An Image Into 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\/loading_an_image_into_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=\"Loading An Image Into An HTML5 Canvas - Robert Price\" \/>\n<meta property=\"og:description\" content=\"As part of my Draw Something Solver, I need to be able to load an image into an HTML 5 Canvas. I thought I’d share the solution to help others. Firstly, assume you have an HTML page with an empty canvas element called drawsomething. Secondly, assume the image you want to load is next to … Continue reading "Loading An Image Into An HTML5 Canvas"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.robertprice.co.uk\/robblog\/loading_an_image_into_an_html5_canvas-shtml\/\" \/>\n<meta property=\"og:site_name\" content=\"Robert Price\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-03T19:37:27+00:00\" \/>\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\\\/loading_an_image_into_an_html5_canvas-shtml\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/loading_an_image_into_an_html5_canvas-shtml\\\/\"},\"author\":{\"name\":\"rob\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"headline\":\"Loading An Image Into An HTML5 Canvas\",\"datePublished\":\"2012-05-03T19:37:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/loading_an_image_into_an_html5_canvas-shtml\\\/\"},\"wordCount\":308,\"keywords\":[\"HTML5\",\"JavaScript\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/loading_an_image_into_an_html5_canvas-shtml\\\/\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/loading_an_image_into_an_html5_canvas-shtml\\\/\",\"name\":\"Loading An Image Into An HTML5 Canvas - Robert Price\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\"},\"datePublished\":\"2012-05-03T19:37:27+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/loading_an_image_into_an_html5_canvas-shtml\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/loading_an_image_into_an_html5_canvas-shtml\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/loading_an_image_into_an_html5_canvas-shtml\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Loading An Image Into 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":"Loading An Image Into 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\/loading_an_image_into_an_html5_canvas-shtml\/","og_locale":"en_GB","og_type":"article","og_title":"Loading An Image Into An HTML5 Canvas - Robert Price","og_description":"As part of my Draw Something Solver, I need to be able to load an image into an HTML 5 Canvas. I thought I’d share the solution to help others. Firstly, assume you have an HTML page with an empty canvas element called drawsomething. Secondly, assume the image you want to load is next to … Continue reading \"Loading An Image Into An HTML5 Canvas\"","og_url":"https:\/\/www.robertprice.co.uk\/robblog\/loading_an_image_into_an_html5_canvas-shtml\/","og_site_name":"Robert Price","article_published_time":"2012-05-03T19:37:27+00:00","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\/loading_an_image_into_an_html5_canvas-shtml\/#article","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/loading_an_image_into_an_html5_canvas-shtml\/"},"author":{"name":"rob","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"headline":"Loading An Image Into An HTML5 Canvas","datePublished":"2012-05-03T19:37:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/loading_an_image_into_an_html5_canvas-shtml\/"},"wordCount":308,"keywords":["HTML5","JavaScript"],"articleSection":["Dev"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.robertprice.co.uk\/robblog\/loading_an_image_into_an_html5_canvas-shtml\/","url":"https:\/\/www.robertprice.co.uk\/robblog\/loading_an_image_into_an_html5_canvas-shtml\/","name":"Loading An Image Into An HTML5 Canvas - Robert Price","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website"},"datePublished":"2012-05-03T19:37:27+00:00","author":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"breadcrumb":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/loading_an_image_into_an_html5_canvas-shtml\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.robertprice.co.uk\/robblog\/loading_an_image_into_an_html5_canvas-shtml\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.robertprice.co.uk\/robblog\/loading_an_image_into_an_html5_canvas-shtml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.robertprice.co.uk\/robblog\/"},{"@type":"ListItem","position":2,"name":"Loading An Image Into 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\/22","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=22"}],"version-history":[{"count":0,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}