CNAVAS GRADIENTS

← Previous Next →

Graphic Canvas is used for rendering 2D graphics. You can create and apply gradients using the Canvas APIs.

Type of Graphic Canvas API

• Linear Gradients
• Radial Gradients

Linear Gradients

Linear Gradients create a smooth transition between two or more colors in a straight line.

Linear Gradients Script Example

<script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var gradient = ctx.createLinearGradient(0, 0, 200, 0); gradient.addColorStop(0, 'red'); gradient.addColorStop(0.5, 'green'); gradient.addColorStop(1, 'blue'); ctx.fillStyle = gradient; ctx.fillRect(10, 10, 200, 100); </script>

Radial Gradients

Radial Gradients create a smooth transition in a circular or elliptical pattern.

Radial Gradients Script Example

<script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var gradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 100); gradient.addColorStop(0, 'red'); gradient.addColorStop(1, 'blue'); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(100, 100, 100, 0, Math.PI * 2); ctx.fill(); </script>

← Previous Next →