Prev Demo
HTML5
>
Canvas Gradients
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Demo</title> </head> <body> <h1>Linear Gradient</h1> <canvas id="Canvas" width="300" height="250" style ="border:5px solid orange;"></canvas> <script> var canvas = document.getElementById('Canvas'); var context = canvas.getContext('2d'); context.rect(10, 10, 200, 150); var linear = context.createLinearGradient(0, 0, 200, 150); linear.addColorStop(0, 'orange'); linear.addColorStop(1, 'blue'); context.fillStyle = linear; context.fill(); </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
