My laptop is not allowing me to save the actual picture but here is the code I used.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 100;
var y = 90;
var endx = 200;
var endy = 215;
var endx1 = 310;
var endy1 = 100;
var endx2 = 200;
var endy2 = 80;
var endx3 = 100;
var endy3 = 90;
var controlx = 105;
var controly = 150;
var controlx1 = 290;
var controly1 = 150;
var controlx2 = 260;
var controly2 = 5;
var controlx3 = 140;
var controly3 = 5;
context.beginPath();
context.lineCap = "round";
context.lineWidth = 12;
context.strokeStyle = 'rgb(255, 100, 150)';
context.fillStyle = 'rgb(245, 10, 10)';
context.moveTo(x, y);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.quadraticCurveTo(controlx1, controly1, endx1, endy1);
context.quadraticCurveTo(controlx2, controly2, endx2, endy2);
context.quadraticCurveTo(controlx3, controly3, endx3, endy3);
context.stroke();
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment