Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html> <body> <canvas id="gradCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"></canvas> <script> var canvas = document.getElementById("gradCanvas"); var ctx = canvas.getContext("2d"); // Create a linear gradient var lingrad = ctx.createLinearGradient(0, 0, 0, 100); lingrad.addColorStop(0, "#0070C0"); lingrad.addColorStop(1, "#fff"); // Create a radial gradient var radgrad = ctx.createRadialGradient(200, 150, 10, 200, 150, 50); radgrad.addColorStop(0, "#FF8C00"); radgrad.addColorStop(1, "#fff"); // Use gradients as fill styles ctx.fillStyle = lingrad; ctx.fillRect(10, 10, 280, 80); ctx.fillStyle = radgrad; ctx.beginPath(); ctx.arc(200, 150, 50, 0, Math.PI * 2); ctx.fill(); </script> </body> </html>
