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