<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="800" height="500" style="border:3px solid #FFFF00;"></canvas>
<!--Setting of size of Canvas-->
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.strokeStyle = 'red';
<!--Setting of color of arc-->
var x = canvas.width / 2;<!--center of x axis-->
var y = canvas.height / 2;<!--center of y axis-->
context.beginPath();
context.moveTo(x-200, y-100);
context.bezierCurveTo(x-200, y+100, x+200, y+100,x+200,y-100);
context.lineWidth = 10;
context.strokeStyle = 'red';
context.stroke();
context.lineWidth = 2;
context.moveTo(x-200, y-100);
context.lineTo(x-200,y+100);
context.moveTo(x+200, y+100);
context.lineTo(x+200,y-100);
context.moveTo(x-200, y+100);
context.lineTo(x,y+50);
context.moveTo(x+200, y+100);
context.lineTo(x,y+50);
context.stroke();<!--for the drawing of line stroke is required-->
context.font = "20px Arial";
context.fillText("(x-200,y-100)",x-260,y-110);
context.fillText("(x-200,y+100)",x-260,y+120);
context.fillText("(x+200,y-100)",x+150,y-110);
context.fillText("(x+200,y+100)",x+150,y+120);
context.font = "28px Arial";
context.fillText("x,y represents centre of the canvas",x-215,y-190);
context.fillText("moveTo(x-200,y-100)",x-350,y+170);
context.fillText("bezierCurveTo(x-200, y+100, x+200, y+100,x+200,y-100)",x-350,y+210);
</script>
</body>
</html>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.