HTML5 canvas element
The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript. In other words, in order to leverage the HTML5 Canvas, you’ll need to place the canvas tag somewhere inside your HTML, create an initializer JavaScript function that accesses the canvas tag once the page loads, and then utilize the HTML5 Canvas API to draw your visualizations.
1 | <canvas id="myCanvas"></canvas> |
HTML5 Canvas Template
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE HTML> <html> <head> <script> window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // do stuff here }; </script> </head> <body> <canvas id="myCanvas" width="578" height="200"> </canvas> </body> </html> |
HTML5 Canvas Element Explanation
The code above will be the base layout for the majority of your future HTML5 Canvas projects. We can characterize the tallness and width of the canvas label utilizing the stature and width traits, much the same as we would with some other HTML tag. Inside the initializer work we can get to the canvas DOM question by its id, and afterward, get a 2-d setting utilizing the getContext() method.