<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x2 = 200;
var y2 = 300;
var controlx1 = 300;
var controly1 = 100;
var controlx2 = 450;
var controly2 = 500;
var endx2 = 600;
var endy2 = 300;
// Quadratic Curve
var x = 200;
var y = 200;
var controlx = 100;
var controly = 20;
var endx = 200;
var endy = 100;
var x1 = 200;
var y1 = 200;
var controlx1 = 300;
var controly1 = 20;
var endx1 = 200;
var endy1 = 300;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.quadraticCurveTo(controlx1, controly1, x, y);
context.lineWidth = 10
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(255, 0, 0)';
context.stroke();
/*
context.beginPath();
context.moveTo(x1, y1);
context.lineWidth = 10
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(255, 0, 0)';
context.stroke();
*/
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment