<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//rectangle variables
var x = 100;
var y = 50;
var width = 600;
var height = 600;
//square
context.beginPath();
context.rect(x,y,width,height);
context.fill();
context.restore();
//heart
context.beginPath();
context.moveTo(531, 370);
context.bezierCurveTo(541, 355, 547, 338, 547, 320);
context.bezierCurveTo(547, 272, 507, 234, 459, 234);
context.bezierCurveTo(436, 234, 415, 242, 400, 255);
context.bezierCurveTo(384, 242, 363, 233, 340, 233);
context.bezierCurveTo(311, 233, 285, 247, 269, 268);
context.bezierCurveTo(258, 282, 252, 301, 252, 320);
context.bezierCurveTo(252, 338, 258, 357, 268, 370);
context.bezierCurveTo(268, 370, 347, 463, 383, 521);
context.bezierCurveTo(394, 541, 399, 555, 399, 564);
context.bezierCurveTo(390, 539, 531, 370, 531, 370);
context.closePath();
context.fillStyle = "rgb(190, 30, 40)";
context.fill();
context.lineWidth = 6;
context.lineCap = "square";
context.lineJoin = "round";
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800" align="center"></canvas>
</body>
</html>
No comments:
Post a Comment