BigAB/dabblet.css

## dabblet.css
/**
 * 16:9 Asect ratio responsive
 * I want the "view screen" to have a somewhat standard
 * aspect ration regardless of device/window size
 */
:root, html, body {
	font-size: 16px;
	padding: 0;
	margin: 0;
	border: 0;
	height: 100%;
}

body {
	position: relative;
}

.layout-wrapper {
	background-color: #ddd;
	position: absolute;
	left:0;right:0;top:0;bottom:0;
	overflow-y: scroll;
}

.viewscreen {
	position: relative;
	background-color: yellow;
	width: 900px;
	max-width: 100%;
	margin: 50px auto;
}

.viewscreen:before {
	content: '';
	display: block;
	padding-top: 56.25%;
}

.viewscreen canvas {
	background-color: blue;
	position: absolute;
	left:0;right:0;top:0;bottom:0;
	height: 100%;
	width: 100%;
}

.viewscreen iframe {
	display: none;
	position: absolute;
	left:0;right:0;top:0;bottom:0;
	height: 100%;
	width: 100%;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="layout-wrapper">
	<div class="viewscreen">
		<canvas id="screen" height="900px" width="1600px"></canvas>
		<iframe src="http://www.youtube.com/embed/EbfN8Y_1myA" frameborder="0" allowfullscreen></iframe>
	</div>
</div>

## dabblet.js
// Canvas
var canvas = document.getElementById('screen');
var ctx = canvas.getContext('2d');

ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 870, 480);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (700, 60, 55, 50);

## settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}
	/**
	* 16:9 Asect ratio responsive
	* I want the "view screen" to have a somewhat standard
	* aspect ration regardless of device/window size
	*/
	:root, html, body {
	font-size: 16px;
	padding: 0;
	margin: 0;
	border: 0;
	height: 100%;
	}

	body {
	position: relative;
	}

	.layout-wrapper {
	background-color: #ddd;
	position: absolute;
	left:0;right:0;top:0;bottom:0;
	overflow-y: scroll;
	}

	.viewscreen {
	position: relative;
	background-color: yellow;
	width: 900px;
	max-width: 100%;
	margin: 50px auto;
	}

	.viewscreen:before {
	content: '';
	display: block;
	padding-top: 56.25%;
	}

	.viewscreen canvas {
	background-color: blue;
	position: absolute;
	left:0;right:0;top:0;bottom:0;
	height: 100%;
	width: 100%;
	}

	.viewscreen iframe {
	display: none;
	position: absolute;
	left:0;right:0;top:0;bottom:0;
	height: 100%;
	width: 100%;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div class="layout-wrapper">
	<div class="viewscreen">
	<canvas id="screen" height="900px" width="1600px"></canvas>
	<iframe src="http://www.youtube.com/embed/EbfN8Y_1myA" frameborder="0" allowfullscreen></iframe>
	</div>
	</div>
	// Canvas
	var canvas = document.getElementById('screen');
	var ctx = canvas.getContext('2d');

	ctx.setTransform(1, 0, 0, 1, 0, 0);
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	ctx.fillStyle = "rgb(200,0,0)";
	ctx.fillRect (10, 10, 870, 480);

	ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
	ctx.fillRect (700, 60, 55, 50);