<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 400;
var y = 200;
var controlx1 = 300;
var controly1 = -10;
var controlx2 = 50;
var controly2 = 150;
var endx = 200;
var endy = 320;
var controlx3 = 320;
var controly3 = 400;
var endx2 = 400;
var endy2 = 550;
var controlx4 = 480;
var controly4 = 400;
var endx3 = 600;
var endy3 = 320;
var controlx5 = 750;
var controly5 = 150;
var controlx6 = 500;
var controly6 = -10;
//name symbol//
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = '24pt ariel';
context.fillStyle= 'white';
context.fillText('Alexandra', 200, 295);
//square//
context.beginPath();
context.rect(0, 0, 800, 600);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'grey';
context.fill();
context.stroke();
//second heart//
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.quadraticCurveTo(controlx3, controly3, endx2, endy2);
context.quadraticCurveTo(controlx4, controly4, endx3, endy3);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, x, y);
context.closePath();
context.lineWidth = 20;
context.fillStyle = "blue";
context.fill();
context.strokeStyle = "black";
context.stroke();
// second heart//
context.moveTo(400, 200);
context.bezierCurveTo(360, 75, 150, 200, 325, 350);
context.quadraticCurveTo(375, 385, 400, 450);
context.quadraticCurveTo(425, 385, 475, 350);
context.bezierCurveTo(650, 200, 440, 75, 400, 200);
context.closePath();
context.lineWidth = 20;
context.fillStyle = "pink";
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
