HTML5 Game - Create Gradients with A Three-Stop Gradient

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Linear Gradient

Description

Create Gradients with A Three-Stop Gradient

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
canvas { //from  w w w  .  j a va2s  . com
  border: 1px solid #000; 
} 
        </style> 
    </head> 
    <body> 
      <canvas id="myCanvas" width="200" height="200">Did You Know: Every time 
        you use a browser that doesn't support HTML5
      </canvas> 
      <script> 
// Get the context we will be using for drawing. 
let myCanvas = document.getElementById('myCanvas'); 
let myContext = myCanvas.getContext('2d'); 
  
// Create a gradient object and add color stops. 
let myGradient = myContext.createLinearGradient(0, 0, 200, 200); 
myGradient.addColorStop(0, '#000'); 
myGradient.addColorStop(0.6, 'green'); 
myGradient.addColorStop(1, 'blue'); 
  
// Set the stroke styles and stroke some rectangles. 
myContext.strokeStyle = myGradient; 
myContext.lineWidth = 20; 
myContext.strokeRect(10, 10, 110, 110); 
myContext.strokeRect(80, 80, 110, 110); 
      </script> 
    </body> 
</html>

Related Topic