<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// HEART

var spointX = canvas.width/2;
var spointY = canvas.height*6/7;

var epointX = canvas.width/2;
var epointY = canvas.height/2;


// USING BEZIER CURVES WITH TWO CONTROL POINTS
context.beginPath();
context.moveTo(spointX, spointY);
context.bezierCurveTo(canvas.width*1/5, canvas.height*3/5, canvas.width*1/5, canvas.height*1/5, epointX, epointY);
context.bezierCurveTo(canvas.width*4/5, canvas.height/5, canvas.width*4/5, canvas.height*3/5, spointX, spointY);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.fillStyle = "rgb(255,0,0)";
context.fill();
context.stroke();


// USING QUADRATIC CURVES WITH JUST ONE CONTROL POINT
context.beginPath();
context.moveTo(spointX, spointY);
context.quadraticCurveTo(canvas.width*1/5, canvas.height/5, epointX, epointY);
context.quadraticCurveTo(canvas.width*4/5, canvas.height/5, spointX, spointY);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.fillStyle = "rgb(0,255,0)";
context.fill();
context.stroke();


// EXPORT AS PNG IMAGE

var dataURL = canvas.toDataURL();
document.getElementById("myImage").src = dataURL;

// DONT FORGET TO MODIFY THE body CODE UNDERNEATH

};

</script>