Skip to content

Instantly share code, notes, and snippets.

@wayanjimmy

wayanjimmy/index.html

Created March 24, 2015 09:44
Show Gist options
  • Save wayanjimmy/47ee8b2ff47dbeed5bd5 to your computer and use it in GitHub Desktop.
Save wayanjimmy/47ee8b2ff47dbeed5bd5 to your computer and use it in GitHub Desktop.
Download ZIP
xbMEdQ
Raw
index.html
<body>
<p>Image to use:</p>
<img id="scream" width="64" height="64" src="http://placehold.it/64/55C1E7/fff&text=T" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="500" height="800" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
var padding = 10;
var rows = 6;
var columns = 10;
for(var j=0; j < columns; j++) {
for(var i=0; i < rows; i++) {
if(j%2 == 1) {
ctx.drawImage(img, (i*(img.width + padding)) + (img.width/2), (j*(img.height + padding)));
}else{
ctx.drawImage(img, (i*(img.width + padding)), (j*(img.height + padding)));
}
}
}
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment