⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Canvas Draw Function Set Up

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
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>
▲