Creating a simple border image with canvas & chainvas

by drublic

HTML

<script src="http://leaverou.me/chainvas/chainvas.js"></script>
<canvas height="50"></canvas>

JavaScript

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
    d = canvas.width = canvas.height;

ctx.prop('fillStyle', '#ddd').scale(d/6, d/6);

for(var i=1; i <= 5; i += 2) {
    for(var j=1; j <= 5; j += 2) {
        if(i != 3 || j != 3) {
            ctx.circle(i, j, 1).fill();     
        }
    }  
}