Question

How to draw two colors gradient combine rectangle on the canvas in JavaScript

Answer 1

<canvas id="canvas" width="1024" height="600"></canvas>

<script type="text/JavaScript">   

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var gradient=ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");
ctx.fillStyle=gradient;
ctx.fillRect(10, 10, 170, 100);     

/*
run:  
  
   
*/
  
</script>

 

70+ SQL courses for beginners and professionals