DevelopPHP.com
Web Development Training System

Canvas Draw Function Set Up

Learn how to draw on the HTML canvas element using JavaScript. The canvas tag is aptly named. It supplies you with a means of drawing things through script and it renders in browser software. Things can be stationary or animated inside of a canvas. <html> <head> <script> window.onload = draw; // Execute draw function when DOM is ready function draw() { // Assign our canvas element to a variable var canvas = document.getElementById("canvas1"); // Create the HTML5 context object to enable draw methods var ctx = canvas.getContext("2d"); // fillStyle (r, g, b, alpha); ctx.fillStyle = "rgba(0,200,0,1)"; // fillRect (X, Y, width, height); ctx.fillRect (36, 10, 22, 22); } </script> </head> <body> <canvas id="canvas1" width="400" height="300"></canvas> </body> </html>
CanvasDrawFunctionSet