HTML5 Game - Creating shapes with fill

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Drawing Using Paths

Description

Creating shapes with fill

Demo

ResultView the demo in separate window 

<!doctype html>  
<html>  
 <head>  
  <meta charset="utf-8">  
  <title>Gradient Fill 1</title>  
  <style>canvas{border:1px solid red;}</style>  
 </head>  //ww w. j  a v a2  s.  c om
 <body>  
  <canvas id="canvas" width="400" height="400"></canvas>  
  <script>  
  window.onload = function () {  
    let canvas = document.getElementById('canvas'),  
        context = canvas.getContext('2d'),  
        pt1 = {x: 0, y: 0},               //gradient start point  
        pt2 = {x: 100, y: 100},           //gradient end point  
        gradient = context.createLinearGradient(pt1.x, pt1.y, pt2.x, pt2.y);  

    //gradient from white to red  
    gradient.addColorStop(0, "#ffffff");  
    gradient.addColorStop(1, "#ff0000");  

    context.fillStyle = gradient;  
    context.fillRect(0, 0, 100, 100);  
  };  
  </script>  
 </body>  
</html>

Related Topic