Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html> <body> <canvas id="clipCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> <script> var canvas = document.getElementById("clipCanvas"); var ctx = canvas.getContext("2d"); // Create a circle to use for clipping ctx.beginPath(); ctx.arc(150, 75, 60, 0, Math.PI * 2); ctx.stroke(); ctx.clip(); // Everything drawn hereafter is limited to the circle's area // Draw a gradient rectangle behind the clipped circle var grad = ctx.createLinearGradient(0, 0, 300, 150); grad.addColorStop(0, "#0070C0"); grad.addColorStop(1, "#FF8C00"); ctx.fillStyle = grad; ctx.fillRect(0, 0, 300, 150); </script> </body> </html>
