Skip to content

Instantly share code, notes, and snippets.

@mathdoodle

mathdoodle/doodle.json

Created July 1, 2015 16:47
Show Gist options
  • Save mathdoodle/375ec2bb01fb4bfd41c2 to your computer and use it in GitHub Desktop.
Save mathdoodle/375ec2bb01fb4bfd41c2 to your computer and use it in GitHub Desktop.
Download ZIP
Random Checkerboard
Raw
doodle.json
{
"uuid": "9e6e8852-6006-4122-99ba-4d0306f44abc",
"description": "Random Checkerboard",
"dependencies": {
"DomReady": "latest"
},
"operatorOverloading": true
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Vector graphics with canvas</title>
<style>
/* STYLE-MARKER */
</style>
<!-- SCRIPTS-MARKER -->
</head>
<body>
<canvas id='canvas' width='900' height='700'></canvas>
<script>
// CODE-MARKER
</script>
</body>
</html>
Raw
script.ts
DomReady.ready(load);
/**
* The handler function to be called at the end of the document loading process.
* @param ev The `load` event.
*/
function load() {
var canvas = <HTMLCanvasElement>document.getElementById('canvas');
canvas.height = 700;
canvas.width = 900;
var ctx: CanvasRenderingContext2D = canvas.getContext('2d');
var size = 100;
for (var i=0; i<9; i++) {
for (var j=0; j<7; j++) {
var x = Math.random() * 9;
if (x > 2) {
ctx.fillStyle = 'rgb(' + 100 + ',' + 100 + ',100)';
}
else {
ctx.fillStyle = 'rgb(' + 200 + ',' + 200 + ',200)';
}
ctx.fillRect(i*size,j*size,size,size);
}
}
}
Raw
style.less
#doodle1 {
position: absolute;
background-color: #cccccc;
width: 900px;
height: 700px;
top: 150px;
left: 400px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment