{"id":983,"date":"2013-07-24T04:09:11","date_gmt":"2013-07-24T04:09:11","guid":{"rendered":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=983"},"modified":"2013-07-25T05:46:03","modified_gmt":"2013-07-25T05:46:03","slug":"programming-simple-animations-using-html-canvas-and-javascript","status":"publish","type":"post","link":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/programming-simple-animations-using-html-canvas-and-javascript\/","title":{"rendered":"Programming Simple Animations Using HTML, Canvas, and JavaScript"},"content":{"rendered":"\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Fprogramming-simple-animations-using-html-canvas-and-javascript%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n<div id=\"attachment_996\" style=\"width: 212px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/07\/mario.png\"><img aria-describedby=\"caption-attachment-996\" loading=\"lazy\" class=\"size-full wp-image-996\" title=\"mario\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/07\/mario.png\" alt=\"mario\" width=\"202\" height=\"188\" \/><\/a><p id=\"caption-attachment-996\" class=\"wp-caption-text\">Mario Drawn Using HTML and JavaScript<\/p><\/div>\n<p dir=\"ltr\">A number of people in our community have started asking the \u201chow do I get started as a games programmer?\u201d \u00a0I believe we live in an exciting time to learn the craft of computer programming. \u00a0\u00a0All the tools you need to start a simple game, exist in your web browser today.<\/p>\n<p>In this post, I will introduce a very simple programmable browser feature that enables you to start learning computer graphics. \u00a0\u00a0Using the Canvas tag, \u00a0browser based users can view games and visualizations that you create without installing additional software like Silverlight or Flash. \u00a0\u00a0Since the technology is just part of a HTML web page, you can publish and share your work with the world!<\/p>\n<p dir=\"ltr\">Check out some awesome visualizations and gameful experiences using HTML and JavaScript.<\/p>\n<ul>\n<li><a href=\"http:\/\/d3js.org\/\">http:\/\/d3js.org\/<\/a><\/li>\n<li><a href=\"http:\/\/limejs.com\">http:\/\/limejs.com<\/a><\/li>\n<li><a href=\"http:\/\/browserquest.mozilla.org\/\">http:\/\/browserquest.mozilla.org\/<\/a><\/li>\n<\/ul>\n<p dir=\"ltr\">The \u201ccanvas\u201d tag gives programmers a rectangular 2D \u201cdrawing pad\u201d that can be placed in your browser. \u00a0\u00a0In this tutorial, I want to introduce you to drawing simple animations using the Canvas tag. \u00a0\u00a0\u00a0\u00a0If you are new to browser based programming, I would highly recommend that you check out the following free websites and tutorials.<\/p>\n<ul>\n<li><a href=\"http:\/\/codeacademy.com\" target=\"_blank\">Code Academy<\/a> &#8211; I would focus your attention on learning JavaScript and HTML.<\/li>\n<li>Khan Academy for Computer Science &#8211; <a href=\"https:\/\/www.khanacademy.org\/cs\">https:\/\/www.khanacademy.org\/cs<\/a> &#8211; \u00a0They have created an amazing collection of learning tutorials.<\/li>\n<li><a href=\"http:\/\/eloquentjavascript.net\/\">http:\/\/eloquentjavascript.net\/<\/a> &#8211; This is a great FREE book helping to introduce JavaScript. \u00a0\u00a0While it does not cover any \u201ccanvas\u201d concepts, it provides a good reference for the basic and advanced features of the language.<\/li>\n<\/ul>\n<p dir=\"ltr\">As I work with the canvas tag, I appreciate that the coding experience feels rapid. \u00a0\u00a0I can make small code changes and refresh the browser to see the impact quickly. \u00a0\u00a0\u00a0It\u2019s fun working with a programming technology that does not require compiling. \u00a0\u00a0\u00a0Thanks to Google, Apple, Microsoft, and Firefox, the browsers are getting faster and more capable. \u00a0\u00a0\u00a0I think programming using the Canvas tag can be a great technology option for students and teachers who have <a href=\"http:\/\/www.google.com\/intl\/en\/chrome\/devices\/chromebooks.html\" target=\"_blank\">Chromebooks<\/a>.<\/p>\n<p>To demonstrate this pattern for simple animation, let&#8217;s create a small clock using the Canvas tag. I have included all the code below. You can see the clock below.<\/p>\n<p><iframe loading=\"lazy\" style=\"width: 450px; height: 450px;\" src=\"http:\/\/inspiredtoeducate.net\/clock\/clock.html\" width=\"320\" height=\"240\"><\/iframe><\/p>\n<p>[cc lang=&#8221;html&#8221;]<br \/>\n<!DOCTYPE html><br \/>\n<html><br \/>\n<head><\/p>\n<style>\nbody{\n background:black;\n color:white;\n}\n<\/style>\n<p><script><\/p>\n<p>function drawClock()\n{<\/p>\n<p>var c=document.getElementById(\"myCanvas\");\nvar g=c.getContext(\"2d\");<\/p>\n<p>\/\/ Calculate position of clock objects...\nvar clockWidth = myCanvas.width;\nvar clockCenterX = clockWidth \/ 2;\nvar clockCenterY = clockWidth \/ 2;\nvar hourLen = clockWidth \/ 2 * 0.7;\nvar minLen = clockWidth  \/ 2 * 0.6;\nvar secLen = clockWidth  \/ 2 * 0.5;<\/p>\n<p>var K = -1*(Math.PI * 2.0) \/ 4;<\/p>\n<p>\/\/ Draw background ...\ng.fillStyle=\"#000000\";\ng.fillRect(0,0,clockWidth,clockWidth);<\/p>\n<p>\/\/ Draw circle for clock ...\ng.beginPath();\ng.strokeStyle = 'yellow';\ng.arc(clockCenterX,clockCenterY,clockWidth\/2 * 0.9,0,2*Math.PI);\ng.stroke();<\/p>\n<p>\/\/ Get time ...\nvar date = new Date;\nvar seconds = date.getSeconds();\nvar minutes = date.getMinutes();\nvar hour = date.getHours() ;<\/p>\n<p>var divTime = document.getElementById(\"divTime\");\ndivTime.innerText = \"The time is \" + hour+\":\" +minutes+ \":\"+seconds;<\/p>\n<p>\/\/ Draw Hour Glass ...<\/p>\n<p>\/\/ Calculate Hour X, Y\nvar hourAngleUnit = (Math.PI * 2.0) \/ 12.0;\nvar hourX = hourLen * Math.cos(hour * hourAngleUnit + K)  + clockCenterX;\nvar hourY = hourLen * Math.sin(hour * hourAngleUnit + K)  + clockCenterY;\ng.beginPath();\ng.strokeStyle = '#ff0000';\ng.moveTo(clockCenterX, clockCenterY);\ng.lineTo(hourX, hourY);\ng.stroke();<\/p>\n<p>\/\/ Draw Minutes ...\nvar minuteAngleUnit = (Math.PI * 2.0) \/ 60.0;\nvar minX = minLen * Math.cos(minutes * minuteAngleUnit + K)  + clockCenterX;\nvar minY = minLen * Math.sin(minutes * minuteAngleUnit + K)  + clockCenterY;\ng.beginPath();\ng.strokeStyle = '#00ff00';\ng.moveTo(clockCenterX, clockCenterY);\ng.lineTo(minX, minY);\ng.stroke();<\/p>\n<p>\/\/ Draw Seconds ...\nvar secondAngleUnit = (Math.PI*2.0) \/ 60.0;\nvar secX = secLen * Math.cos(seconds * secondAngleUnit + K) + clockCenterX;\nvar secY = secLen * Math.sin(seconds * secondAngleUnit + K) + clockCenterY;\ng.beginPath();\ng.strokeStyle = '#0000ff';\ng.moveTo(clockCenterX, clockCenterY);\ng.lineTo(secX, secY);\ng.stroke();<\/p>\n<p>setTimeout(drawClock, 1000);<\/p>\n<p>}<\/p>\n<p>function bodyOnLoad()\n{   \n    drawClock();\n}\n<\/script><br \/>\n<\/head><br \/>\n<body onload=\"bodyOnLoad()\"><br \/>\n    <canvas id=\"myCanvas\" width=\"400\" height=\"400\" style=\"border:1px solid black\"><br \/>\n    Your browser does not support the HTML5 canvas tag.<br \/>\n    <\/canvas><\/p>\n<div id=\"divTime\"><\/div>\n<p><\/body><br \/>\n<\/html><br \/>\n[\/cc]<\/p>\n<p>When you start coding with the canvas tag, you need to include the tag in the<br \/>\nbody of the document. In the example below, the canvas tag is 400 x 400<br \/>\npixels. We have assigned a name of &#8220;myCanvas&#8221; to the element.<br \/>\nThe name of the canvas is important so that we can reference this element<br \/>\nin JavaScript later.<\/p>\n<p>[cc lang=&#8221;html&#8221;]<br \/>\n<canvas id=\"myCanvas\" width=\"400\" height=\"400\" style=\"border: 1px solid black;\"><br \/>\nYour browser does not support the HTML5 canvas tag.<br \/>\n<\/canvas><\/p>\n<div id=\"divTime\"><\/div>\n<p>[\/cc]<\/p>\n<p>On the body tag, we are using the &#8220;onload&#8221; event to trigger a function<br \/>\nwe created called &#8220;bodyOnLoad.&#8221; This function is responsible for<br \/>\nstarting our clock and drawing it.<\/p>\n<p>[cc lang=&#8221;html&#8221;]<br \/>\nfunction bodyOnLoad(){<br \/>\ndrawClock();<br \/>\n}<br \/>\n[\/cc]<\/p>\n<p>In the following code sample, focus your attention on the 4 elements<br \/>\nrequired to perform simple animation. You need to get access to the drawing<br \/>\ncontext of the canvas. (i.e variable g ) . You need to clear to the screen.<br \/>\nIn the final code sample, you can see that I used a rectangle. After clearing<br \/>\nthe screen, you are free to draw anything else that you like. The final line<br \/>\nof code in &#8220;drawClock&#8221; schedules the function to be called again in one second.<\/p>\n<p>[cc lang=&#8221;js&#8221;]<br \/>\nfunction drawClock()<br \/>\n{<br \/>\n\/\/ Access the drawing context for the canvas tag.<br \/>\nvar c=document.getElementById(&#8220;myCanvas&#8221;);<br \/>\nvar g=c.getContext(&#8220;2d&#8221;);<\/p>\n<p>\/\/ Clear the screen<\/p>\n<p>\/\/ Draw stuff<\/p>\n<p>\/\/ Do this process again in 1 second<br \/>\nsetTimeout(drawClock, 1000);<br \/>\n}<br \/>\n[\/cc]<\/p>\n<p>The following code draws a black rectangle over the canvas.<br \/>\nThe rectangle is positioned on the upper left corner of the canvas.<br \/>\n(i.e. Point 0,0) In the canvas tag, the X-axis increases from left to right.<br \/>\nThe Y-axis increases from top to bottom. This is backwards from standard<br \/>\ncartesian coordinate systems. \ud83d\ude42<\/p>\n<p>[cc lang=&#8221;js&#8221;]<br \/>\ng.fillStyle=&#8221;#000000&#8243;;<br \/>\ng.fillRect(0,0,clockWidth,clockWidth);<br \/>\n[\/cc]<\/p>\n<p>Code to draw the circle of the clock using the &#8220;arc&#8221; function. We had to<br \/>\nspecify the center of the circle, radius, a start angle in radians, and<br \/>\nend angle in radians.<\/p>\n<p>[cc lang=&#8221;js&#8221;]<br \/>\ng.beginPath();<br \/>\ng.strokeStyle = &#8216;yellow&#8217;;<br \/>\ng.arc(clockCenterX,clockCenterY,clockWidth\/2 * 0.9, 0, 2*Math.PI);<br \/>\ng.stroke();<br \/>\n[\/cc]<\/p>\n<p>The following shows how we draw one hand of the clock. The line is colored<br \/>\nred. We move to the center of the clock. We draw a line outward to point<br \/>\n(hourX, hourY) To learn more about the polar coordinate math,<br \/>\nplease check out the following <a href=\"http:\/\/www.mathsisfun.com\/polar-cartesian-coordinates.html\">link<\/a>.<\/p>\n<p>[cc lang=&#8221;js&#8221;]<br \/>\ng.beginPath();<br \/>\ng.strokeStyle = &#8216;#ff0000&#8217;;<br \/>\ng.moveTo(clockCenterX, clockCenterY);<br \/>\ng.lineTo(hourX, hourY);<br \/>\ng.stroke();<br \/>\n[\/cc]<\/p>\n<p>To learn more about the canvas tag and discover more tutorials on this<br \/>\nbrowser feature, check out the following resource from <a href=\"http:\/\/www.w3schools.com\/tags\/tag_canvas.asp\">W3Schools.com<\/a><\/p>\n<p>Photo by <a href=\"http:\/\/www.flickr.com\/photos\/tankgirlrs\/\" target=\"_blank\">Randi Boice.<\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Related Posts:<\/strong><\/p>\n<ul>\n<li><a title=\"Benefits of Teaching Kids To Code That No One Is Talking About\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=623\">Benefits of Teaching Kids To Code That No One Is Talking About<\/a><\/li>\n<li><a title=\"7 Reasons Why The Makers Movement Is Revolutionary\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=942\">7 Reasons Why The Makers Movement Is Revolutionary<\/a><\/li>\n<li><a title=\"How to Build Your Mobile App using HTML\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=849\">How to Build Your Mobile App using HTML<\/a><\/li>\n<li><a title=\"Maker Camp: Free Virtual Summer Camp for Teens\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=961\">Maker Camp: Free Virtual Summer Camp For Teens<\/a><\/li>\n<li><a title=\"5 Resources To Help You Teach Kids Programming\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=689\">5 Resources To Help You Teach Kids Programming<\/a><\/li>\n<li><a title=\"5 reasons to love Khan academy for computer science\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=202\">5 reasons to love Khan academy for computer science<\/a><\/li>\n<\/ul>\n\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Fprogramming-simple-animations-using-html-canvas-and-javascript%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n","protected":false},"excerpt":{"rendered":"<p>A number of people in our community have started asking the \u201chow do I get started as a games programmer?\u201d \u00a0I believe we live in an exciting time to learn the craft of computer programming. \u00a0\u00a0All the tools you need to start a simple game, exist in your web browser [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/983"}],"collection":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/comments?post=983"}],"version-history":[{"count":16,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/983\/revisions"}],"predecessor-version":[{"id":998,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/983\/revisions\/998"}],"wp:attachment":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/media?parent=983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/categories?post=983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/tags?post=983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}