Canvas

<canvas id="myCanvas" width="578" height="200"></canvas>

window.onload = function(){
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
      
	  context.font = "40pt Calibri";
	  context.fillText("Hello World!", 310, 30);			    
	  
      //Circle
	  context.beginPath();
  var centerX = canvas.width / 2;
  var centerY = canvas.height - 55;
  var radius = 50;
 
	  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
	  // add linear gradient
  var grd = context.createLinearGradient(230, 0, 370, 200);
	  grd.addColorStop(0, "#8ED6FF"); // light blue
	  grd.addColorStop(1, "#004CB3"); // dark blue
	  context.fillStyle = grd;
	  context.fill();
	  context.lineWidth = 5;
	  context.strokeStyle = "black";
	  context.stroke();

      //QUADRATIC CURVE
	  context.beginPath();//create new line
  var controlX = 288;
  var controlY = 0;
  var endX = 388;
  var endY = 150;
 
	  context.moveTo(188, 150);
	  context.quadraticCurveTo(controlX, controlY, endX, endY);
	  context.lineWidth = 10;
	  context.strokeStyle = "black"; // line color
	  // create radial gradient
  var grd = context.createRadialGradient(238, 50, 10, 238, 50, 200);
	  grd.addColorStop(0, "red");
	  grd.addColorStop(0.17, "orange");
	  grd.addColorStop(0.33, "yellow");
	  grd.addColorStop(0.5, "green");
	  grd.addColorStop(0.666, "blue");
	  grd.addColorStop(1, "violet");	
	  context.fillStyle = grd;
	  context.fill();
	  context.lineJoin = "round"; //rounds off the edges of the line
	  context.closePath(); //causes the line to close at the end points.
	  context.stroke();

};