The first commented line is your dabblet’s title

dabblet.css

/**
 * 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;
}

dabblet.html

<canvas id="myCanvas" width="600" height="500"></canvas>

dabblet.js

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);

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}