CODE 1 Practice
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//////////////////Purple Line
var x= 25;
var y = 50;
var x1 = 150;
var y1 = 220;
var x2 = 400;
var y2 = 300;
var x3 = 500;
var y3 = 450;
var x4 = 650;
var y4 = 100
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineTo(x3, y3);
context.lineCap = 'round';
context.lineWidth = 15;// declare the width in pixels of the line
context.strokeStyle = 'rgb(102,0,153)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//////////////////////Pink Line
var x= 50;
var y = 50;
var x1 = 300;
var y1 = 220;
var x2 = 400;
var y2 = 300;
var x3 = 600;
var y3 = 450;
var x4 = 650;
var y4 = 100
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineTo(x3, y3);
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255,51,204)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
//////////////////////Green Line
var x= 100;
var y = 50;
var x1 = 150;
var y1 = 220;
var x2 = 400;
var y2 = 350;
var x3 = 250;
var y3 = 500;
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineCap = 'miter';
context.lineWidth = 30;// declare the width in pixels of the line
context.strokeStyle = 'rgb(102,255,102)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
////////////////////////////Blue Box
var x=100;
var y=200;
var width = 200
var height= 200;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(153,102,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(51,0,51)");
//intermediate color
grd.addColorStop(0.5, "rgb(51,153,255)");
// ending color
grd.addColorStop(1, "rgb(0,153,102)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
////////////////Pink Box
var x=350;
var y=350;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(204,51,153)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(255,204,102)");
//intermediate color
grd.addColorStop(0.5, "rgb(255,153,255)");
// ending color
grd.addColorStop(1, "rgb(255,102,51)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
///////////////////Green Box
var x=300;
var y=20;
var width = 100
var height= 200;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(0,51,0)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, "rgb(0,102,0)");
//intermediate color
grd.addColorStop(0.5, "rgb(0,204,153)");
// ending color
grd.addColorStop(1, "rgb(0,51,51)");
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Comments
Post a Comment