Happy Almost Valentines Day!!
xoxo,
Chelsea
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Rectangle
var rectx =0;
var recty =0;
var rectwidth = canvas.width;
var rectheight = canvas.height;
var startx = 800;
var starty = 600;
var endx = 0;
var endy = 0;
// Bezier Curve
var x = 450;
var y = 150;
var controlX1 = 350;
var controlY1 = 15;
var controlX2 = 155;
var controlY2 = 160;
var endX = 350;
var endY = 325;
//Quadratic Curve
var controlX3 = 425;
var controlY3 = 385;
var endX3 = 450;
var endY3 = 480;
//Quadratic Curve Variables
var controlX4= 475;
var controlY4= 375;
var endX4= 550;
var endY4= 325;
//Bezier Curve Variables
var controlX5 = 745;
var controlY5 = 160;
var controlX6 = 550;
var controlY6 = 15;
var endX5 = x;
var endY5 = y;
//Rectangle
context.beginPath();
context.rect(rectx,recty,rectwidth,rectheight);
//Rect Color
var grd= context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(.5,'rgb(250,0,150)');
grd.addColorStop(1,'rgb(200,0,200)');
context.fillStyle=grd;
context.lineWidth = 0;
context.fill();
context.strokeStyle = 'rgb(155,0,155)';
context.stroke();
//Entire Heart
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX5, endY5);
var grd= context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(.5,'rgb(155,0,155)');
grd.addColorStop(1,'rgb(255,255,255)');
context.fillStyle=grd;
context.lineWidth = 0;
context.fill();
context.strokeStyle = 'rgb(155,0,155)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment