HTML5 Tutorial: What is eLearning Canvas

What is eLearning canvas?

An eLearning canvas refers to the webpage (or HTML code set) that an eLearning developer has created using the canvas element to produce eLearning content. Similarly, “elearning canvasing” is the process of creating eLearning content using the HTML5 canvas element to create web-based training materials. For example, if you wish to deploy eLearning on modern smart phones and tablet devices by using HTML5 instead of Flash, and you then use the canvas element to do so, you have just created an eLearning canvas! Canvas is an HTML5 “element” that allows web programmers to create (or render) 2D graphics and bitmaps by writing code rather than by using a drawing program like Flash. Here is an example of what the Canvas element can look like in HTML code: <canvas id=”Box” width=”200″ height=”200″> </canvas> In the above code, the canvas element was used to create an instance of an object called Box (using “id”) and set the size of the object (width/height). Combined with JavaScript programming techniques, canvas can be used to dynamically create and manipulate graphics using HTML5 to generate a result similar to what you typically create using Flash. Here is an example of JavaScript being used to generate the “Box” object that we created using the canvas element: var Box = document.getElementById(‘Box’); var context = Box.getContext(‘2d’); context.fillStyle = “rgb(255,0,0)”; context.fillRect(30, 30, 50, 50); </script> In this example, the programmer created a box using the canvas element and then used JavaScript to draw a red rectangle based upon the predefined canvas element. Response by eLearning developer Stephen “Magic” Johnson – Do you need help deploying eLearning on mobile devices like smart phones and tablets? Call or email Magic at at 206-407-3395 or toll-free 866-501-6897.

Leave a Reply