canvasTask3.html 1.7 KB
Newer Older
nishanth's avatar
nishanth committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
<!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>