Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas API Example</title> </head> <body> <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000;"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // Draw a rectangle ctx.fillStyle = '#FF0000'; ctx.fillRect(50, 50, 150, 100); // Draw a circle ctx.beginPath(); ctx.arc(200, 200, 40, 0, 2 * Math.PI); ctx.fillStyle = '#00FF00'; ctx.fill(); // Draw text ctx.font = '20px Arial'; ctx.fillStyle = '#0000FF'; ctx.fillText('Hello Canvas', 100, 300); </script> </body> </html>