{"id":22066,"date":"2020-05-05T15:10:15","date_gmt":"2020-05-05T15:10:15","guid":{"rendered":"http:\/\/creating_html5_animations"},"modified":"2025-10-10T14:54:28","modified_gmt":"2025-10-10T21:54:28","slug":"creating_html5_animations","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/creating_html5_animations","title":{"rendered":"Canvas Animation: Create HTML5 Animations With the CanvasElement"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Canvas animation is a feature of HTML5 that allows you to draw images, edit images, and erase them, on a drawing board which you set up with the &lt;canvas&gt; element.<\/p>\n<p>The canvas is a rectangle-like area on an HTML page. By default, the canvas has no border or content.<\/p>\n<p>You can use the HTML5 canvas element to create animations. This is done by combining HTML, CSS, and JavaScript (JS) to build shapes and modify them on the canvas. JavaScript animations are done by programming gradual changes in an element\u2019s style. The changes are called by a timer. When the timer interval is small, the animation looks continuous.<\/p>\n<p>When choosing a canvas size, you should consider where your image or animation will be displayed. For desktop computers, a common choice is 1920&#215;1080 pixels (1080p).<\/p>\n<p>The general process for creating an animation is:<\/p>\n<ul>\n<li>Set up a canvas by adding a &lt;canvas&gt; element to your HTML document<\/li>\n<li>Locate the element in your JavaScript code and create a drawing object<\/li>\n<li>Draw your shapes with a JavaScript method like fillStyle, fillRect, strokeStyle, or strokeRect<\/li>\n<li>Clear the canvas using the clearRect method and draw another frame<\/li>\n<\/ul>\n<p>This article shows you how to follow this process and create simple animations in three examples. Also described are the best practices for canvas optimization, including the procedures for prerendering to an off-screen canvas, batching together <code>canvas<\/code> calls, layering <code>canvas<\/code> for complex scenes, and implementing the <code>requestAnimationFrame()<\/code> method.<\/p>\n<p>Here\u2019s what we cover in this blog post:<\/p>\n<ul>\n<li>\n<a href=\"#html5-animations\">Definition of HTML5 Canvas Animation<\/a>\n<\/li>\n<li>\n<a href=\"#create-html5-animations\">Process for Creating a Simple HTML5 Canvas Animations<\/a>\n<\/li>\n<li>\n<a href=\"#code-examples\">Code Examples<\/a>\n<\/li>\n<li>\n<a href=\"#best-practices\">HTML5 Best Practices for Canvas Optimization<\/a>\n<\/li>\n<li>\n<a href=\"#gif\">Generation of GIF-Based Animations With Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"#video\">Display of Video Content With Cloudinary<\/a>\n<\/li>\n<\/ul>\n<h2 id=\"html5-animations\">Definition of HTML5 Canvas Animation<\/h2> \n<p>You create HTML5 animations with HTML\u2019s <code>canvas<\/code> element, which acts as a drawing board for images on which are displayed multiple frames for animation. As mentioned earlier, to build HTML5 animations, you use HTML, CSS, and JS.<\/p>\n<p>Additional tools are available with which you can quickly create complex animations. Examples are <a href=\"https:\/\/cloudinary.com\/guides\/digital-asset-management\/the-evolution-of-digital-asset-management-systems-on-premise-cloud-and-dynamic\">media management systems<\/a> and HTML5-animation software, which offer the drag-and-drop capability for placement of shapes and enable interactivity. HTML5 animation tools typically generate code, which you can then modify or embed in your sites or apps.<\/p>\n<h2 id=\"create-html5-animations\">Process for Creating Simple HTML5 Canvas Animations<\/h2>\n<p>To create animations with HTML5, you need shapes and a method for controlling the live actions. Recall that you can create shapes, which are JS elements, and control animations with CSS or through JS. You can also incorporate images, video, or audio by importing the appropriate elements.<\/p>\n<p>Follow these steps:<\/p>\n<ol>\n<li>Set up a canvas by adding a <code>&lt;canvas&gt;<\/code> element to your HTML document, for example:\n<code>&lt;canvas id=&quot;myCanvas&quot; width=&quot;300&quot; height=&quot;200&quot;&gt;&lt;\/canvas&gt;<\/code>\n<\/li>\n<li>Locate the element in your JS and create a drawing object with this code:\n<pre class=\"js-syntax-highlighted\"><code>let canvas = document.getElementById(&quot;myCanvas&quot;);\nlet ctx = canvas.getContext(&quot;2d&quot;);\n<\/code><\/pre>\n<\/li>\n<li>Draw your shapes with a method, such as one of the following:\n<ul>\n<li>\n<code>fillStyle(color|pattern|gradient)<\/code>: for setting the fill style of your shape.<\/li>\n<li>\n<code>fillRect(x,y,w,h)<\/code>: for drawing a rectangle according to the specified coordinates and fill style.<\/li>\n<li>\n<code>strokeStyle(color|pattern|gradient)<\/code>: for specifying a stroke style for your shape.<\/li>\n<li>\n<code>strokeRect(x,y,w,h)<\/code>: for drawing a rectangle with borders that match the specified sizes, coordinates, and style.<\/li>\n<\/ul>\n<\/li>\n<li>Clear the canvas using the clearRect() method and draw another frame<\/li>\n<\/ol>\n<p>For all the drawing options, see the W3Schools\u2019 <a href=\"https:\/\/www.w3schools.com\/tags\/ref_canvas.asp\"><em>HTML Canvas Reference<\/em><\/a>.<\/p>\n<p>While drawing shapes, you can save your canvas state to create frames for rendering according to the parameters you set with the following JS methods:<\/p>\n<ul>\n<li>\n<code>window.setInterval()<\/code>\n<\/li>\n<li>\n<code>window.setTimeout()<\/code>\n<\/li>\n<li>\n<code>window.requestAnimationFrame()<\/code>\n<\/li>\n<\/ul>\n<h2 id=\"code-examples\">HTML5 Canvas Animations With Code Examples<\/h2>\n<p>Below are three beautiful examples of HTML5 animations that showcase their types. To see the HTML, CSS, and JS code within each frame, click the buttons across the top left.<\/p>\n<ol>\n<li>\n<strong>Lightning, created by Jack Rugile<\/strong>\n<\/li>\n<\/ol>\n<iframe height=\"300\" style=\"width: 100%;\" scrolling=\"no\" title=\"Canvas Lightning WIP\" src=\"https:\/\/codepen.io\/jackrugile\/embed\/preview\/kQwPRO?default-tab=html%2Cresult\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/jackrugile\/pen\/kQwPRO\">\n  Canvas Lightning WIP<\/a> by Jack Rugile (<a href=\"https:\/\/codepen.io\/jackrugile\">@jackrugile<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.\n<\/iframe>\n<ol start=\"2\">\n<li>\n<strong>Tearable Mesh, created by dissimulate<\/strong>\n<\/li>\n<\/ol>\n<iframe height=\"300\" style=\"width: 100%;\" scrolling=\"no\" title=\"Tearable Cloth\" src=\"https:\/\/codepen.io\/dissimulate\/embed\/preview\/nYQrNP?default-tab=html%2Cresult\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/dissimulate\/pen\/nYQrNP\">\n  Tearable Cloth<\/a> by dissimulate (<a href=\"https:\/\/codepen.io\/dissimulate\">@dissimulate<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.\n<\/iframe>\n<ol start=\"3\">\n<li>\n<strong>Earth and Sun, created by MDN<\/strong>\n<\/li>\n<\/ol>\n<iframe height=\"300\" style=\"width: 100%;\" scrolling=\"no\" title=\"An animated solar system\" src=\"https:\/\/codepen.io\/unicodeveloper\/embed\/preview\/LzNQYG?default-tab=html%2Cresult\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/unicodeveloper\/pen\/LzNQYG\">\n  An animated solar system<\/a> by Prosper Otemuyiwa (<a href=\"https:\/\/codepen.io\/unicodeveloper\">@unicodeveloper<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.\n<\/iframe>\n<h2 id=\"best-practices\">HTML5 Best Practices for Canvas Optimization<\/h2>\n<p>For a smooth performance of animations, adopt the best practices below.<\/p>\n<h3>Prerender to an Off-Screen Canvas<\/h3>\n<p>A majority of the scenes in many animations, such as games, contain repeated images or similar ones. Rather than reloading those images in your primary canvas each time, prerender the scenes in an off-screen canvas, after which you can move that canvas back in line with your primary one.<\/p>\n<p>Such a practice not only boosts the performance of your animations, but also smooths out their appearance.<\/p>\n<h3>Batch Together Canvas Calls<\/h3>\n<p>Drawing elements while scripting animations takes resources and time. For efficiency, consider loading multiple, shorter commands at once to the video buffer, which then processes each of the operations.<\/p>\n<p>For example:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>context.beginPath();\nfor (let i = 0; i &lt; points.length - 1; i++) {\n  let p1 = points[i];\n  let p2 = points[i+1];\n  context.moveTo(p1.x, p1.y);\n  context.lineTo(p2.x, p2.y);\n}\ncontext.stroke(); **\/\/Placing this method inside the for loop would result in poorer performance.**\n<\/code><\/pre>\n<h3>Layer Canvases for Complex Scenes<\/h3>\n<p>Layering canvases separates the rendering of larger elements. Do so by applying transparency to your top-layer <code>canvas<\/code> elements and a <code>background<\/code> canvas to those elements that you want to render. Assuming that your canvases are aligned, viewers will see a composite image of all the canvases on a rendering of your scene.<\/p>\n<p>With layered canvases, you can keep the static elements of your animation as <a href=\"https:\/\/cloudinary.com\/blog\/how_to_automatically_and_professionally_remove_photo_backgrounds\">background<\/a> and create the moving elements in the other layers, saving you the trouble of having to refresh or rerender a majority of your scene.<\/p>\n<h3>Implementation of <code>requestAnimationFrame()<\/code><\/h3>\n<p>The <code>requestAnimationFrame<\/code> method enables you to rely on your viewer\u2019s browser to apply your set-rendering routine at the right time. That means that no rendering occurs if your page is not being viewed\u2014as opposed to having the browser render scenes at a fixed rate regardless of whether the viewer is on your page.<\/p>\n<p>Having the browser determine when to render animations eliminates waste of processing power when they are out of view. However, when applying <code>requestAnimationFrame()<\/code>, be sure to verify that the browser is rendering the animation smoothly. As a rule, with <code>requestAnimationFrame()<\/code> in place, browsers render animations at 60 FPS, but that\u2019s not guaranteed.<\/p>\n<p>The following code adds a check for smoothness:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>let x = 50;\nlet y = 50;\nlet lastRender = Date.now();\nfunction render() {\n  let delta = Date.now() - lastRender;\n  x += delta;\n  y += delta;\n  context.fillRect(x, y, W, H);\n  requestAnimationFrame(render);\n}\nrender();\n<\/code><\/pre>\n<h2 id=\"gif\">Generation of GIF-Based Animations With Cloudinary<\/h2>\n<p>Generating animated GIFs on Cloudinary is a simple, intuitive process:<\/p>\n<ol>\n<li>Create your images with Cloudinary <a href=\"https:\/\/cloudinary.com\/blog\/how_to_overlay_text_on_image_easily_pixel_perfect_and_with_no_css_html\">overlays<\/a> and chained transformations.<\/li>\n<li>Properly position the images that are in or outside the canvas with custom overlay coordinates.<\/li>\n<li>Add a simple script that programmatically generates transformation URLs and pass them to Cloudinary\u2019s upload API call as the criteria for generating new images.<\/li>\n<\/ol>\n<p>In Cloudinary, you can create a \u201csprite\u201d\u2014a single, cloud-based GIF\u2014by merging together images that share the same tag. For a step-by-step tutorial, see our post <a href=\"https:\/\/dam-files.cloudinary.com\/blog\/cloud_based_animated_gif_generation\">Create Cloud-Based Animation Sequence GIFs<\/a>.<\/p>\n<h2 id=\"video\">Display of Video Content With Cloudinary<\/h2>\n<p>Beyond animations, most websites need a convenient way to process and display video. Cloudinary is the answer: it\u2019s a cloud-based platform on which you can dynamically transcode and manipulate videos, optimizing file formats and sizes to any device, browser, or media channel. Additionally, you can easily perform these tasks on that platform:<\/p>\n<ul>\n<li>Embed videos in webpages and apps with Cloudinary\u2019s dynamic URLs.<\/li>\n<li>Integrate your videos with URL-based APIs and SDKs.<\/li>\n<li>Deliver smooth video-streaming through multiple CDNs and live-stream from any device, including sharing on social media.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/cloudinary.com\/users\/register\/free\">Why not sign up for a free Cloudinary account<\/a> to try things out? We offer a generous free plan to get you started.<\/p>\n<h2>Want to Learn More About Image Editing?<\/h2>\n<p>Have a look at these posts:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai\">Image-Editing Basics and a Tutorial for Automation With AI<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_automatically_and_professionally_remove_photo_backgrounds\">How to Automatically Remove Photo Backgrounds in Seconds With AI<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/10_great_jquery_sliders_and_5_ways_to_build_one_yourself\">Top 7 jQuery Sliders and 3 Ways in Which to Create Your Own<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/adding_watermarks_credits_badges_and_text_overlays_to_images\">Adding Image Watermarks, Credits, Badges and Text Overlays to Images<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary\">Add the 360 Product Viewer to Your Commerce Site with Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/new_ai_based_image_auto_crop_algorithm_sticks_to_the_subject\">Smart automatic image cropping: Maybe you CAN always get what you want<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_improve_your_shopify_s_store_loading_times_using_cloudinary\">Integrating Cloudinary Into Your Shopify Store<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_overlay_text_on_image_easily_pixel_perfect_and_with_no_css_html\">How to Overlay Text on Image Easily, Pixel Perfect and With No CSS\/HTML<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/taking_cloudinary_s_magento_extension_to_the_next_level\">Taking Cloudinary\u2019s Magento Extension to the Next Level<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":25575,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,145,303,305],"class_list":["post-22066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-html5","tag-video","tag-video-api"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Canvas Animation: How to Create Beautiful HTML 5 Animations<\/title>\n<meta name=\"description\" content=\"Quickly learn how to use canvas animation in HTML 5 to create animations by combining HTML, CSS, and JavaScript (JS) to sequentially build shapes on the canvas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/creating_html5_animations\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Canvas Animation: Create HTML5 Animations With the CanvasElement\" \/>\n<meta property=\"og:description\" content=\"Quickly learn how to use canvas animation in HTML 5 to create animations by combining HTML, CSS, and JavaScript (JS) to sequentially build shapes on the canvas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/creating_html5_animations\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-05T15:10:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-10T21:54:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681416942\/Web_Assets\/blog\/animation-frame-splash_25575dfad5\/animation-frame-splash_25575dfad5.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"770\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_html5_animations#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_html5_animations\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Canvas Animation: Create HTML5 Animations With the CanvasElement\",\"datePublished\":\"2020-05-05T15:10:15+00:00\",\"dateModified\":\"2025-10-10T21:54:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_html5_animations\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_html5_animations#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681416942\/Web_Assets\/blog\/animation-frame-splash_25575dfad5\/animation-frame-splash_25575dfad5.jpg?_i=AA\",\"keywords\":[\"Asset Management\",\"HTML5\",\"Video\",\"Video API\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_html5_animations\",\"url\":\"https:\/\/cloudinary.com\/blog\/creating_html5_animations\",\"name\":\"Canvas Animation: How to Create Beautiful HTML 5 Animations\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_html5_animations#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_html5_animations#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681416942\/Web_Assets\/blog\/animation-frame-splash_25575dfad5\/animation-frame-splash_25575dfad5.jpg?_i=AA\",\"datePublished\":\"2020-05-05T15:10:15+00:00\",\"dateModified\":\"2025-10-10T21:54:28+00:00\",\"description\":\"Quickly learn how to use canvas animation in HTML 5 to create animations by combining HTML, CSS, and JavaScript (JS) to sequentially build shapes on the canvas.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_html5_animations#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/creating_html5_animations\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_html5_animations#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681416942\/Web_Assets\/blog\/animation-frame-splash_25575dfad5\/animation-frame-splash_25575dfad5.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681416942\/Web_Assets\/blog\/animation-frame-splash_25575dfad5\/animation-frame-splash_25575dfad5.jpg?_i=AA\",\"width\":770,\"height\":423,\"caption\":\"Image showing one of our html5 animation examples of ninja jumping across a room\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_html5_animations#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Canvas Animation: Create HTML5 Animations With the CanvasElement\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Canvas Animation: How to Create Beautiful HTML 5 Animations","description":"Quickly learn how to use canvas animation in HTML 5 to create animations by combining HTML, CSS, and JavaScript (JS) to sequentially build shapes on the canvas.","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:\/\/cloudinary.com\/blog\/creating_html5_animations","og_locale":"en_US","og_type":"article","og_title":"Canvas Animation: Create HTML5 Animations With the CanvasElement","og_description":"Quickly learn how to use canvas animation in HTML 5 to create animations by combining HTML, CSS, and JavaScript (JS) to sequentially build shapes on the canvas.","og_url":"https:\/\/cloudinary.com\/blog\/creating_html5_animations","og_site_name":"Cloudinary Blog","article_published_time":"2020-05-05T15:10:15+00:00","article_modified_time":"2025-10-10T21:54:28+00:00","og_image":[{"width":770,"height":423,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681416942\/Web_Assets\/blog\/animation-frame-splash_25575dfad5\/animation-frame-splash_25575dfad5.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/creating_html5_animations#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/creating_html5_animations"},"author":{"name":"","@id":""},"headline":"Canvas Animation: Create HTML5 Animations With the CanvasElement","datePublished":"2020-05-05T15:10:15+00:00","dateModified":"2025-10-10T21:54:28+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/creating_html5_animations"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/creating_html5_animations#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681416942\/Web_Assets\/blog\/animation-frame-splash_25575dfad5\/animation-frame-splash_25575dfad5.jpg?_i=AA","keywords":["Asset Management","HTML5","Video","Video API"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/creating_html5_animations","url":"https:\/\/cloudinary.com\/blog\/creating_html5_animations","name":"Canvas Animation: How to Create Beautiful HTML 5 Animations","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/creating_html5_animations#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/creating_html5_animations#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681416942\/Web_Assets\/blog\/animation-frame-splash_25575dfad5\/animation-frame-splash_25575dfad5.jpg?_i=AA","datePublished":"2020-05-05T15:10:15+00:00","dateModified":"2025-10-10T21:54:28+00:00","description":"Quickly learn how to use canvas animation in HTML 5 to create animations by combining HTML, CSS, and JavaScript (JS) to sequentially build shapes on the canvas.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/creating_html5_animations#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/creating_html5_animations"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/creating_html5_animations#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681416942\/Web_Assets\/blog\/animation-frame-splash_25575dfad5\/animation-frame-splash_25575dfad5.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681416942\/Web_Assets\/blog\/animation-frame-splash_25575dfad5\/animation-frame-splash_25575dfad5.jpg?_i=AA","width":770,"height":423,"caption":"Image showing one of our html5 animation examples of ninja jumping across a room"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/creating_html5_animations#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Canvas Animation: Create HTML5 Animations With the CanvasElement"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681416942\/Web_Assets\/blog\/animation-frame-splash_25575dfad5\/animation-frame-splash_25575dfad5.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22066"}],"version-history":[{"count":13,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22066\/revisions"}],"predecessor-version":[{"id":38739,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22066\/revisions\/38739"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/25575"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}