javascript - HTML5 Canvas - repeat text all the canvas size -

is there way draw inside cavnas size of it? i've checked can repeat image want repeat text.

as plus, if text shifted each line, great. example of effect need if set "1234567" text:

1234567 1234567 1234567 1234567 1234567 1234567 234567 1234567 1234567 1234567 1234567 1234567  34567 1234567 1234567 1234567 1234567 1234567 1 4567 1234567 1234567 1234567 1234567 1234567 12 567 1234567 1234567 1234567 1234567 1234567 123 67 1234567 1234567 1234567 1234567 1234567 1234 7 1234567 1234567 1234567 1234567 1234567 12345  1234567 1234567 1234567 1234567 1234567 123456 1234567 1234567 1234567 1234567 1234567 1234567 

measuretext(txt)

you can measure text canvas.canvas.measuretext(txt).width

here basic example various limitations. more math needed create bigger canvases...

txtheight line-height. offset distance want shift text.

the rest math should improved solid function.

code

var b=document.createelement('canvas'); b.width=320; b.height=160; c=b.getcontext("2d"); function draw(txt){  c.font="20px arial";  var txtheight=25;  var offset=5;  var w=math.ceil(c.measuretext(txt).width);  var txt=new array(w*2).join(txt+' ');//change multipler more lines  for(var i=0;i<math.ceil(b.height/txtheight);i++){   c.filltext(txt,-(i*offset),i*txtheight);  } } document.body.appendchild(b); draw('1234567'); 

demo

https://jsfiddle.net/wav0xmlz/1/

for more precision measuring every line or writing letter per letter better.

edit

unless use monospaced font it's mess remove half visible txt....as every letter has different spacing. iiii shorter tttt non monospaced fonts.

monospaced fonts have fixed spacing .... find , know how width every charachter ... math , done.

you can use split,shift,join,push create each line

https://jsfiddle.net/kds7zkkf/