Q:

Canvas Pattern not repeating

I am making a Canvas Pattern using the following javascript:
//$('#canvas1').height($(document).height());
//console.log($('#canvas1').width($(document).width()));

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

// set up a pattern
var pattern = document.createElement('canvas');
pattern.width = 80;
pattern.height = 80;
var pctx = pattern.getContext('2d');

pctx.beginPath();
pctx.lineWidth = "3";
pctx.strokeStyle = "red";
pctx.rect(74, 74, 3, 3);  
pctx.stroke();

var pattern = ctx.createPattern(pattern, "repeat");
ctx.rect(0,0,800,800);
ctx.fillStyle = pattern;
ctx.fill();

The resulting pattern doesn't seem to repeat even when the ctx.rect values are defined as 800. The canvas is as follows: 
<canvas id="canvas1"style="position:absolute;left:0;top:0;"></canvas>

How can I make it repeat throughout the height and width of current page. I know that I can set the height and width using jQuery and I tested that, but the pattern is still not repeating. Where am I going wrong?

A:

Well, I guess you got confused with .rect()'s parameters. It should be pctx.rect(3, 3, 74, 74).

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

// set up a pattern
var pattern = document.createElement('canvas');
pattern.width = 80;
pattern.height = 80;
var pctx = pattern.getContext('2d');

pctx.beginPath();
pctx.lineWidth = "3";
pctx.strokeStyle = "red";
pctx.rect(3, 3, 74, 74);
pctx.stroke();

var _pattern = ctx.createPattern(pattern, "repeat");
ctx.rect(0, 0, can.width, can.height);
ctx.fillStyle = _pattern;
ctx.fill();
<canvas id="canvas1" width="320" height="320" style="border: 1px solid black; position: absolute; left: 0; top: 0;"></canvas>

