Hosting Solutions
mobile_logo Table of Contents

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>

HTML Videos

Canvas Basics

Canvas Draw Function Set UpCanvas Animation Basics TutorialCanvas Draw Lines and Filled Shapes TutorialCanvas Fallback Content