poles(20); // this number is the x position at which the line (pole) will be generated
ctx.clearRect(0, 0, WIDTH, HEIGHT);
poles(140)

poles(20);
ctx.clearRect(0, 0, WIDTH, HEIGHT);

poles(20);
ctx.clearRect(0, 0, WIDTH, HEIGHT);
setTimeout(function () {
    poles(140)
}, 1000);

function poles(x) {
    var bottomH = getRandomInt(20, 180)
    // using seperate rectangles will make a break
    rect(40, 220 - bottomH, x, 0); // first section of line
    rect(40, bottomH, x, HEIGHT - bottomH); // second section of line
}

var canvas = document.getElementById("canvas"),
    WIDTH = canvas.width,
    HEIGHT = canvas.height;
var ctx = canvas.getContext("2d");

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function rect(w, h, x, y) {
    ctx.rect(x, y, w, h);
    ctx.fill();
}

function poles(x) {
    var bottomH = getRandomInt(20, 180); // determine where the line break will be
    rect(40, 220 - bottomH, x, 0);
    rect(40, bottomH, x, HEIGHT - bottomH);
}

poles(20);
ctx.clearRect(0, 0, WIDTH, HEIGHT);
setTimeout(function () {
    poles(140)
}, 1000);