<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 50;
var y = 50;
var x1 = 400;
var y1 = 550;
var x2 = 750;
var y2 = 50;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = 30;
context.strokeStyle = '#6633cc';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 0;
var y = 0;
var x1 = 400;
var y1 = 600;
var x2 = 800;
var y2 = 0;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 255, 0)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 0;
var y = 0;
var x1 = 800;
var y1 = 600;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 255, 0)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 100;
var y = 100;
var width = 600;
var height = 400;
context.beginPath();
context.rect(x, y, width, height);
// add linear gradient
var grd = context.createLinearGradient(50, 200, 600, 400);
// light blue
grd.addColorStop(0, "#ff3300");
// light blue
grd.addColorStop(0.5, "#6B1C08");
// dark blue
grd.addColorStop(1, "#6600ff");
// specify gradient fill
context.fillStyle = grd;
context.fill();
// add stroke
context.lineWidth = 10;
context.strokeStyle = 'hsla(120,65%,45%,1.00)';
context.stroke()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 50;
var y = 50;
var width = 600;
var height = 400;
context.beginPath();
context.rect(x, y, width, height);
// add linear gradient
var grd = context.createLinearGradient(50, 100, 350, 350);
// light blue
grd.addColorStop(0, "#ff3300");
// dark blue
grd.addColorStop(1, "#6600ff");
// specify gradient fill
context.fillStyle = grd;
context.fill();
// add stroke
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 255, 0)';
context.stroke()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// left hand square
var x = 50;
var y = 50;
var width = 400;
var height = 400;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = '#FFD1FF';
context.fill();
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 0, 255)';
context.stroke()
// right hand square
var x = 350;
var y = 150;
var width = 400;
var height = 400;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'rgb(0, 255, 200)';
context.stroke()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 75;
var y = 50;
var x1 = 400;
var y1 = 550;
var x2 = 725;
var y2 = 50;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x, y,);
context.fillStyle = 'rgb(255, 255, 50)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(255, 102, 51)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Comments
Post a Comment