Skip to content

Instantly share code, notes, and snippets.

Created December 22, 2014 20:06
Show Gist options
  • Save anonymous/ddff7927d44e65ed0be9 to your computer and use it in GitHub Desktop.
Save anonymous/ddff7927d44e65ed0be9 to your computer and use it in GitHub Desktop.
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
canvas{
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
body {
margin: 0px;
padding: 0px;
}
<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":"javascript"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment