<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var startx = 400;
var starty = 200;
//bezier curve 1
var controlx1 = 525;
var controly1 = 50;
var controlx2 = 650;
var controly2 = 150;
var endx = 550;
var endy = 250;
//quadratic curve 1
var controlx3 = 550;
var controly3 = 250;
var endx2 = 400;
var endy2 = 400;
//quadratic curve 2
var controlx4 = 400;
var controly4 = 400;
var endx3 = 250;
var endy3 = 250;
//bezier curve 2
var controla = 150;
var controlb = 150;
var controla1 = 275;
var controlb1 = 50;
var endx4 = 400;
var endy4 = 200;
context.beginPath();
context.moveTo(startx, starty);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.quadraticCurveTo(controlx3, controly3, endx2, endy2);
context.quadraticCurveTo(controlx4, controly4, endx3, endy3);
context.bezierCurveTo(controla, controlb, controla1, controlb1, endx4, endy4);
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