Skip to content

Instantly share code, notes, and snippets.

@alistairstead3408

alistairstead3408/index.html

Created November 20, 2014 09:52
Show Gist options
  • Save alistairstead3408/0e16fbe37091e0bd709f to your computer and use it in GitHub Desktop.
Save alistairstead3408/0e16fbe37091e0bd709f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ClueShot Demo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Upload new Image</a></li>
<li><a href="#">Set the clue!</a></li>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<canvas id="myCanvas" width="500px" height="500px"></canvas>
<button>Send to friend!</button>
<script id="jsbin-javascript">
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
img = new Image();
img.src = "http://justiceforallison.com/wp-content/uploads/2011/06/bones.jpg";
img.onload = function(){
context.drawImage(img, 0, 0, 500, 500);
};
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<\!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ClueShot Demo</a>
</div>
<\!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Upload new Image</a></li>
<li><a href="#">Set the clue!</a></li>
</div><\!-- /.navbar-collapse -->
</div><\!-- /.container-fluid -->
</nav>
<canvas id="myCanvas" width="500px" height="500px"></canvas>
<button>Send to friend!</button>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
img = new Image();
img.src = "http://justiceforallison.com/wp-content/uploads/2011/06/bones.jpg";
img.onload = function(){
context.drawImage(img, 0, 0, 500, 500);
};
</script></body>
</html>
Raw
jsbin.nahibuyigo.js
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
img = new Image();
img.src = "http://justiceforallison.com/wp-content/uploads/2011/06/bones.jpg";
img.onload = function(){
context.drawImage(img, 0, 0, 500, 500);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment