<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// the radial gradient requires a shape, in this case a rectangle that fills the entire canvas
context.rect(0,0, canvas.width, canvas.height);
// inner circle
var circ1X = 60;
var circ1Y = 30;
var circ1Radius = 100;
// outer circle
var circ2X = 70;
var circ2Y = 25;
var circ2Radius = 200;
// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);
// inner color
grd.addColorStop(0, "rgb(240,244,0)");
// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.5;
grd.addColorStop(N, "rgb(120,80,255)");
// outer color
grd.addColorStop(1, "rgb(125,50,80)");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(300,300,300,300);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 300;
context.strokeStyle = 'blue';
context.stroke();
context.beginPath();
context.lineWidth = 10; // declare the width in pixels of the line
context.moveTo(50,100); // move to starting coordinates
context.lineTo(125,200); // draw line to following point coordinates
context.lineTo(80,100); // draw line to following point coordinates
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
// starting point coordinates
var startX = 0;
var startY = canvas.height/2;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 200;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 5;
context.strokeStyle = 'green';
context.stroke();
var startX = 0;
var startY = canvas.height/2;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(600, 700);
context.quadraticCurveTo(canvas.width*1/5, canvas.height/5, 500, 540);
context.quadraticCurveTo(canvas.width*4/5, canvas.height/5, 100, 500);
context.closePath();
context.fillStyle = "rgb(100,255,150)";
context.fill();
var centerX = 700;
var centerY = 150;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "yellow";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
var centerX = 375;
var centerY = 200;
var radius = 70;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.7 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, 1.1, .8 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
