JSFiddle - React, Tailwind, and code Playground

by Reem Al Dossary

HTML

<b>Canvas Linear Gradient</b>
<p>In this practice problem, you will use createLinearGradient()  method to draw a linear gradient of 7 colors of your choice . See the Javascript comments for guidance.</p>

<div>Canvas
  <br/>
  <canvas id="myCanvas" width="300" height="70"></canvas>
</div>

CSS

canvas {
  border: 1px solid black;
}

#output {
  border: 1px solid gray;
}

div {
  float: left;
}

p {
  clear: both;
}

JavaScript

// your solutions here

	// get the canvas and context objects
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext('2d');
  
  //use createLinearGradient() method and specify the start and 	end points
  var gradient = ctx.createLinearGradient(0, 0, 300, 0);
  
 // create a gradient with 7 colors of your choice, each color    		should be of an equal distance of the gradient
 //use CanvasGradient.addColorStop()method to define new stops   		on the gradient with specified offsets and colors
 //check the MDN docs for more:
	//https://developer.mozilla.org/en-				 				  	US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
  
  gradient.addColorStop(0, 'Salmon');  
	gradient.addColorStop(1 / 6, 'LightPink');  
	gradient.addColorStop(2 / 6, 'pink');  
	gradient.addColorStop(3 / 6, 'pink');  
	gradient.addColorStop(4 / 6, 'PeachPuff');  
	gradient.addColorStop(5 / 6, 'PapayaWhip');  
	gradient.addColorStop(1, 'OldLace');  
  
	//apply the gradient by setting it as the fillStyle() and draw  it to the canvas using fillRect()
  
  ctx.fillStyle = gradient;
	ctx.fillRect(0,0,300,70);