Hosting Solutions
mobile_logo Table of Contents

Canvas Draw Lines and Filled Shapes Tutorial

In this HTML canvas lesson we demonstrate how to plot and draw lines for custom shapes. Learn to draw shapes, fill them, stroke them, color them, and complete the homework assignment laid out in the video. <!DOCTYPE html> <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"); // Draw Filled Shape 1 (center triangle of logo) ctx.beginPath(); ctx.moveTo(100, 50); ctx.lineTo(130, 100); ctx.lineTo(70, 100); ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fill(); // Draw Filled Shape 2 (left flap of logo) ctx.beginPath(); ctx.moveTo(72, 60); ctx.lineTo(85, 72); ctx.lineTo(71, 94); ctx.lineTo(50, 70); ctx.lineTo(65, 40); ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fill(); // Your homework is to Draw Filled Shape 3 here (right flap) // to complete the shape of the logo } </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