Skip to content

Instantly share code, notes, and snippets.

@atomictom
Created January 26, 2015 20:05
Show Gist options
  • Select an option

  • Save atomictom/cfe0515bd9dcbf10a676 to your computer and use it in GitHub Desktop.

Select an option

Save atomictom/cfe0515bd9dcbf10a676 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<head>
<title>Empty Canvas</title>
<style type="text/css">
html, body{
overflow:hidden;
margin: 0px;
}
canvas{
position: fixed;
}
</style>
</head>
<body>
<!-- CANVAS -->
<div class="canvas_div">
<canvas id="canvas" tabindex="1"></canvas>
</div>
<!-- IMAGES -->
<!-- JAVASCRIPT -->
<script type="text/javascript">
// var x = 0
// function loop(){
// window.requestAnimationFrame(loop)
// draw()
// x++
// console.log("drawing " + x)
// }
function draw(){
var canvas = document.getElementById("canvas")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
var ctx = canvas.getContext("2d")
var width = window.innerWidth
var height = window.innerHeight
var directions = "FFFFFFFFRFFFFFRFFFFF".split('')
var x = 0, y = 0, dir = Math.PI / 2
// ctx.clearRect(0, 0, width, height)
ctx.translate(width / 2, height / 2)
ctx.moveTo(0.5, 0.5)
directions.forEach(function (c){
console.log(x + " " + y)
if(c == 'F'){
x += Math.round(Math.cos(dir))
y += Math.round(Math.sin(dir))
ctx.lineTo(x, y)
}
if(c == 'L'){
dir += Math.PI / 2
}
if(c == 'R'){
dir -= Math.PI / 2
}
})
ctx.strokeStyle = "red"
ctx.stroke()
ctx.translate(-width / 2, -height / 2)
}
window.onload = function(){
console.log("Loaded!")
draw()
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment