Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 15, 2015 22:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/ba6aec5cc605f46db59d to your computer and use it in GitHub Desktop.
Save anonymous/ba6aec5cc605f46db59d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html5>
<html>
<head>
</head>
<body>
<div id="#game_div"></div>
<script id="jsbin-javascript">
function set_canvas(width, height) {
var canvas = document.createElement('canvas') ;
canvas.setAttribute('width', width) ;
canvas.setAttribute('height', height) ;
return canvas ;
}
function set_stage(width, height) {
var stage = document.createElement('div') ;
stage.style.width = width ;
stage.style.height = height ;
stage.style.position = 'relative' ;
stage.style.margin = 0 ;
stage.style.transformOrigin = "0 0"; // scale from top left
return stage ;
}
function draw_circle(ctx, circ) {
ctx.beginPath() ;
var x = circ.x ;
var y = circ.y ;
var r = circ.radius ;
ctx.arc(x, y, r, 0, Math.PI * 2, true) ;
ctx.fillStyle = circ.color ;
ctx.fill() ;
ctx.closePath() ;
}
var gameDiv = document.getElementById('#game_div') ; // assume there is some element called game_div
var bgclr = '#FFF' ;
document.body.style.backgroundColor = bgclr ;
document.body.style.overflowY = 'hidden';
document.body.style.margin = 0 ;
gameDiv.style.margin = 0 ;
gameDiv.style.height = '100%' ;
gameDiv.style.width = '100%' ;
gameDiv.style.font = '13pt courier';
gameDiv.style.fontWeight = 'bold';
gameDiv.style.backgroundColor = bgclr ;
gameDiv.style.overflowY = 'hidden';
gameDiv.style.color = '#ccc';
gameDiv.style['-webkit-user-select'] = 'none';
gameDiv.style['-moz-user-select'] = 'none';
gameDiv.style['user-select'] = 'none' ;
var size = 100 ;
var width = size ;
var height = size ;
var dur = 500 ; // transition duration in milliseconds
var perf = window.performance ;
var canvas = set_canvas(width, height) ;
canvas.setAttribute('id', 'vizCanvas') ;
canvas.style.position = 'absolute' ;
var hiddenCanvas = set_canvas(width, height) ;
hiddenCanvas.style.display = 'none' ; // hide this canvas
var context = canvas.getContext('2d') ;
// context.webkitImageSmoothingEnabled = false ;
context.mozImageSmoothingEnabled = false ;
context.imageSmoothingEnabled = false ;
context.font = "48px Arial" ;
context.globalAlpha = 1.0 ;
var stage = set_stage(width, height) ;
stage.appendChild(canvas) ;
gameDiv.appendChild(stage) ;
var circ = {x: width * 0.5, y: height * 0.5, radius: width * 0.5, color: '#39A'} ;
draw_circle(context, circ) ;
</script>
<script id="jsbin-source-html" type="text/html"><!doctype html5>
<html>
<head>
</head>
<body>
<div id="#game_div"></div>
</body>
</html>
</script>
<script id="jsbin-source-javascript" type="text/javascript">function set_canvas(width, height) {
var canvas = document.createElement('canvas') ;
canvas.setAttribute('width', width) ;
canvas.setAttribute('height', height) ;
return canvas ;
}
function set_stage(width, height) {
var stage = document.createElement('div') ;
stage.style.width = width ;
stage.style.height = height ;
stage.style.position = 'relative' ;
stage.style.margin = 0 ;
stage.style.transformOrigin = "0 0"; // scale from top left
return stage ;
}
function draw_circle(ctx, circ) {
ctx.beginPath() ;
var x = circ.x ;
var y = circ.y ;
var r = circ.radius ;
ctx.arc(x, y, r, 0, Math.PI * 2, true) ;
ctx.fillStyle = circ.color ;
ctx.fill() ;
ctx.closePath() ;
}
var gameDiv = document.getElementById('#game_div') ; // assume there is some element called game_div
var bgclr = '#FFF' ;
document.body.style.backgroundColor = bgclr ;
document.body.style.overflowY = 'hidden';
document.body.style.margin = 0 ;
gameDiv.style.margin = 0 ;
gameDiv.style.height = '100%' ;
gameDiv.style.width = '100%' ;
gameDiv.style.font = '13pt courier';
gameDiv.style.fontWeight = 'bold';
gameDiv.style.backgroundColor = bgclr ;
gameDiv.style.overflowY = 'hidden';
gameDiv.style.color = '#ccc';
gameDiv.style['-webkit-user-select'] = 'none';
gameDiv.style['-moz-user-select'] = 'none';
gameDiv.style['user-select'] = 'none' ;
var size = 100 ;
var width = size ;
var height = size ;
var dur = 500 ; // transition duration in milliseconds
var perf = window.performance ;
var canvas = set_canvas(width, height) ;
canvas.setAttribute('id', 'vizCanvas') ;
canvas.style.position = 'absolute' ;
var hiddenCanvas = set_canvas(width, height) ;
hiddenCanvas.style.display = 'none' ; // hide this canvas
var context = canvas.getContext('2d') ;
// context.webkitImageSmoothingEnabled = false ;
context.mozImageSmoothingEnabled = false ;
context.imageSmoothingEnabled = false ;
context.font = "48px Arial" ;
context.globalAlpha = 1.0 ;
var stage = set_stage(width, height) ;
stage.appendChild(canvas) ;
gameDiv.appendChild(stage) ;
var circ = {x: width * 0.5, y: height * 0.5, radius: width * 0.5, color: '#39A'} ;
draw_circle(context, circ) ;</script></body>
</html>
Raw
jsbin.direve.js
function set_canvas(width, height) {
var canvas = document.createElement('canvas') ;
canvas.setAttribute('width', width) ;
canvas.setAttribute('height', height) ;
return canvas ;
}
function set_stage(width, height) {
var stage = document.createElement('div') ;
stage.style.width = width ;
stage.style.height = height ;
stage.style.position = 'relative' ;
stage.style.margin = 0 ;
stage.style.transformOrigin = "0 0"; // scale from top left
return stage ;
}
function draw_circle(ctx, circ) {
ctx.beginPath() ;
var x = circ.x ;
var y = circ.y ;
var r = circ.radius ;
ctx.arc(x, y, r, 0, Math.PI * 2, true) ;
ctx.fillStyle = circ.color ;
ctx.fill() ;
ctx.closePath() ;
}
var gameDiv = document.getElementById('#game_div') ; // assume there is some element called game_div
var bgclr = '#FFF' ;
document.body.style.backgroundColor = bgclr ;
document.body.style.overflowY = 'hidden';
document.body.style.margin = 0 ;
gameDiv.style.margin = 0 ;
gameDiv.style.height = '100%' ;
gameDiv.style.width = '100%' ;
gameDiv.style.font = '13pt courier';
gameDiv.style.fontWeight = 'bold';
gameDiv.style.backgroundColor = bgclr ;
gameDiv.style.overflowY = 'hidden';
gameDiv.style.color = '#ccc';
gameDiv.style['-webkit-user-select'] = 'none';
gameDiv.style['-moz-user-select'] = 'none';
gameDiv.style['user-select'] = 'none' ;
var size = 100 ;
var width = size ;
var height = size ;
var dur = 500 ; // transition duration in milliseconds
var perf = window.performance ;
var canvas = set_canvas(width, height) ;
canvas.setAttribute('id', 'vizCanvas') ;
canvas.style.position = 'absolute' ;
var hiddenCanvas = set_canvas(width, height) ;
hiddenCanvas.style.display = 'none' ; // hide this canvas
var context = canvas.getContext('2d') ;
// context.webkitImageSmoothingEnabled = false ;
context.mozImageSmoothingEnabled = false ;
context.imageSmoothingEnabled = false ;
context.font = "48px Arial" ;
context.globalAlpha = 1.0 ;
var stage = set_stage(width, height) ;
stage.appendChild(canvas) ;
gameDiv.appendChild(stage) ;
var circ = {x: width * 0.5, y: height * 0.5, radius: width * 0.5, color: '#39A'} ;
draw_circle(context, circ) ;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment