Question

How to draw three 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, 180, 0);
gradient.addColorStop(0, "black");
gradient.addColorStop(0.5,"red");
gradient.addColorStop(1, "white");
ctx.fillStyle=gradient;
ctx.fillRect(20, 20, 160, 100);    


/*
run:  
  
   
*/
  
</script>

 

70+ SQL courses for beginners and professionals