<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var controlX1=300;
var controlY1=0;
var controlX2=100;
var controlY2=200;
var endX=250;
var endY=325;
var controlX3=380;
var controlY3=400;
var endX2=400;
var endY2=500;
var controlX4=435;
var controlY4=400;
var endX3=550;
var endY3=325;
var controlX5=700;
var controlY5=200;
var controlX6=500;
var controlY6=0;
var endX4=400;
var endY4=200;
var grdstartX=400;
var grdstartY=0;
var grdendX=400;
var grdendY=600;
//Rectangle
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);
//Purple
grd.addColorStop(0, 'rgb(255,0,255)');
//Blue
grd.addColorStop(1, 'rgb(0,0,255)');
context.fillStyle= grd;
context.fill();
context.stroke();
//Heart
context.beginPath();
context.moveTo( 400,200 );
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, endX4, endY4);
context.fillStyle= 'rgb(255,180,180)';
context.fill();
context.lineWidth=5;
context.lineCap='round';
context.strokeStyle='rgb(20,20,255)'
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment