Skip to content

Instantly share code, notes, and snippets.

/dabblet.css
Created Dec 22, 2014

Embed
What would you like to do?
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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.