<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Top right of heart
var x1= 400;
var y1= 150;
var controlx1 = 515;
var controly1 = 25;
var controlx2 = 650;
var controly2 = 125;
var x2 = 550;
var y2 = 250;
//Bottom right of heart
var controlx3 =455;
var controly3 =355;
var x3 = 400;
var y3 = 475;
//Bottom left of heart
var controlx4 = 350;
var controly4 = 360;
var x4 = 250;
var y4 = 250;
//Top left of heart
var controlx5 = 175;
var controly5 = 125;
var controlx6 = 300;
var controly6 = 25;
//BG Variables
var startx = 0;
var starty = 0;
var width = canvas.width;
var height = canvas.height;
var grdstartx = 400;
var grdstarty = 0;
var grdendx = 400;
var grdendy = 600;
//BG
context.beginPath();
context.rect(startx, starty, width, height);
var grd = context.createLinearGradient(grdstartx, grdstarty, grdendx, grdendy);
grd.addColorStop(0, 'rgb(255, 255, 255)');
grd.addColorStop(.5, 'rgb(255, 100, 100)');
grd.addColorStop(1, 'rgb(0, 0, 0)');
context.fillStyle = grd;
context.fill();
//heart
context.beginPath();
context.moveTo(x1, y1);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, x2, y2);
context.quadraticCurveTo(controlx3, controly3, x3, y3);
context.quadraticCurveTo(controlx4, controly4, x4, y4);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, x1, y1);
context.lineWidth = 5;
context.closePath();
context.fillStyle = 'rgb(255, 150, 150)';
context.fill();
context.strokeStyle = 'rgb(200, 0, 0)';
context.closePath();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment