Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
margin: 0px;
text-align: center;
}
<canvas id="myCanvas" width="600" height="500"></canvas>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = -1.02 * Math.PI;
var endAngle = 0 * Math.PI;
var counterClockwise = false;
// draw a heart centered on the canvas
context.beginPath();
context.arc(x-radius, y-radius, radius, startAngle, endAngle, counterClockwise);
context.arc(x+radius, y-radius, radius, startAngle, endAngle, counterClockwise);
context.lineTo(x, y*2-radius);
context.lineTo(x-radius-radius, y-radius+1);
context.lineWidth = 15;
// line color
context.strokeStyle = 'red';
context.stroke();
// write some words in the middle of the heart
context.font = '40pt Calibri';
context.textAlign = 'center';
context.fillText('D+F', x, y);
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment