Commit 60d07c67 authored by nishanth's avatar nishanth

nishanth

parent 24146cc9
Pipeline #12010 passed with stage
in 14 seconds
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"pink");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(50,150,150,80);
//triangle
</script>
<canvas id="myCanvas1" width="300" height="300"
style="border:1px solid #d3d3d3;">
<script>
var c1 = document.getElementById("myCanvas1");
var ctx1 = c1.getContext("2d");
//triangle
// Create gradient
var grd = ctx1.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"pink");
// Fill with gradient
ctx1.fillStyle = grd;
ctx1.fillRect(10,10,150,80);
// the triangle
ctx1.beginPath();
ctx1.moveTo(90, 90);
ctx1.lineTo(90, 175);
ctx1.lineTo(175, 175);
ctx1.closePath();
// the outline
ctx1.lineWidth = 10;
ctx1.strokeStyle = '#666666';
ctx1.stroke();
// the fill color
ctx1.fillStyle = "#FFCC00";
ctx1.fill();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
ctx1.beginPath();
ctx1.moveTo(150, 100);
ctx1.lineTo(200, 150);
ctx1.lineTo(200, 50);
ctx1.fill();
// Cubic curves example
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fill();
</script>
</body>
</html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment