Skip to content

Instantly share code, notes, and snippets.

@HectorBlisS

HectorBlisS/index.html

Created February 1, 2018 16:33
Show Gist options
  • Save HectorBlisS/b2c28d3130a3588149938de16ff752e8 to your computer and use it in GitHub Desktop.
Save HectorBlisS/b2c28d3130a3588149938de16ff752e8 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/keyuvus
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>BlisS</h1>
<canvas id="canvas"></canvas>
<script id="jsbin-javascript">
var canvas = document.getElementById("canvas");
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.fillStyle = "red";
var x = 0;
var y = 0;
for(var i=0;i<25;i++){
if(i % 2 ===0){
ctx.fillRect(x,y,20,20);
}else{
ctx.strokeRect(x,y,20,20);
}
x+=20;
if(i===4 || i===9 || i===14 || i===19){
x = 0;
y += 20;
}
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var canvas = document.getElementById("canvas");
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.fillStyle = "red";
var x = 0;
var y = 0;
for(var i=0;i<25;i++){
if(i % 2 ===0){
ctx.fillRect(x,y,20,20);
}else{
ctx.strokeRect(x,y,20,20);
}
x+=20;
if(i===4 || i===9 || i===14 || i===19){
x = 0;
y += 20;
}
}
</script></body>
</html>
Raw
jsbin.keyuvus.js
var canvas = document.getElementById("canvas");
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.fillStyle = "red";
var x = 0;
var y = 0;
for(var i=0;i<25;i++){
if(i % 2 ===0){
ctx.fillRect(x,y,20,20);
}else{
ctx.strokeRect(x,y,20,20);
}
x+=20;
if(i===4 || i===9 || i===14 || i===19){
x = 0;
y += 20;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment