Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head><title>Canvas</title></head> <body style="padding: 20px; font-family: Arial;"> <h2>Drawing with Canvas</h2> <canvas id="c" width="500" height="200" style="border:1px solid #ddd; border-radius: 8px;"></canvas> <script> const ctx = document.getElementById("c").getContext("2d"); ctx.fillStyle = "#6366f1"; ctx.fillRect(10, 10, 180, 80); ctx.fillStyle = "#10b981"; ctx.beginPath(); ctx.arc(300, 100, 70, 0, Math.PI*2); ctx.fill(); ctx.fillStyle = "white"; ctx.font = "bold 16px Arial"; ctx.fillText("Hello Canvas!", 30, 55); </script> </body> </html>
Result
Open