javascript - pattern line in different scales -

javascript - pattern line in different scales -

i'm drawing lines pattern i'm creating on different canvas.

i'm translating , scaling context matrices , creating pattern accomplish each line start origin of pattern. (as know patterns created origin of context repeatedly context area , not depends on drawing)

i've managed show below of cases.

each row represents scale. , drawing many lines on different y values. each line should have reddish circles repeatedly along x axis. working many scales.

the problem in scale 1.6. 3rd row lines. see, lines in row not patterned y value growing, , start not right.

i think floating point problem.. can't find problem.

class="snippet-code-js lang-js prettyprint-override">var ctx = demo.getcontext('2d'), pattern, offset = 0; /// create main pattern ctx.fillstyle = 'red'; ctx.beginpath(); ctx.arc(8, 8, 7, 0, math.pi * 2); ctx.fill(); runscale(1, 0); runscale(1.5, 120); runscale(1.6, 240); runscale(2, 360); runscale(3, 480); function runscale(scale, firstpntx) { var newcanvassize = { width: demo.width * scale, height: demo.height * scale }; demo2.width = math.round(newcanvassize.width); demo2.height = math.round(newcanvassize.height); var firstpnt = { x: firstpntx }; var offsetpnt = { x: 0, y: (newcanvassize.height / 2) }; var ctx2 = demo2.getcontext('2d'); var pt = ctx2.createpattern(demo, 'repeat'); ctx = demo3.getcontext('2d'); (var = 20; < 1000; += (demo2.height + 10)) { drawlines(i); } function drawlines(y) { firstpnt.y = y; demo2.width = demo2.width; ctx2.fillstyle = pt; var offsets = [firstpnt.x, y - demo2.height / 2]; ctx2.translate(offsets[0], offsets[1]); ctx2.scale(scale, scale); ctx2.fillrect(-offsets[0] / scale, -offsets[1] / scale, demo2.width / scale, demo2.height / scale); ctx.linewidth = newcanvassize.height; pattern = ctx.createpattern(demo2, 'repeat'); ctx.beginpath(); ctx.moveto(firstpnt.x, firstpnt.y); ctx.lineto(firstpnt.x + 100, firstpnt.y); ctx.strokestyle = 'lightgreen'; ctx.stroke(); ctx.strokestyle = pattern; ctx.stroke(); } } class="snippet-code-css lang-css prettyprint-override">canvas { border: 1px solid #000 } class="snippet-code-html lang-html prettyprint-override"><canvas id="demo" width=16 height=16></canvas> <canvas id="demo2"></canvas> <canvas id="demo3" width=600 height=400></canvas>

after struggling day problem decided post question here.

and now, hr later i've found solution myself..

i've decided not delete sake of forum.

the solution alter offsets.

change line

var offsets = [firstpnt.x, y - demo2.height / 2];

to line

var offsets = [firstpnt.x % demo2.width,firstpnt.y % demo2.height - demo2.height / 2];

class="snippet-code-js lang-js prettyprint-override">var ctx = demo.getcontext('2d'), pattern, offset = 0; /// create main pattern ctx.fillstyle = 'red'; ctx.beginpath(); ctx.arc(8, 8, 7, 0, math.pi * 2); ctx.fill(); runscale(1, 0); runscale(1.5, 120); runscale(1.6, 240); runscale(2, 360); runscale(3, 480); function runscale(scale, firstpntx) { var newcanvassize = { width: demo.width * scale, height: demo.height * scale }; demo2.width = math.round(newcanvassize.width); demo2.height = math.round(newcanvassize.height); var firstpnt = { x: firstpntx }; var offsetpnt = { x: 0, y: (newcanvassize.height / 2) }; var ctx2 = demo2.getcontext('2d'); var pt = ctx2.createpattern(demo, 'repeat'); ctx = demo3.getcontext('2d'); (var = 20; < 1000; += (demo2.height + 10)) { drawlines(i); } function drawlines(y) { firstpnt.y = y; demo2.width = demo2.width; ctx2.fillstyle = pt; var offsets = [firstpnt.x % demo2.width, firstpnt.y % demo2.height - demo2.height / 2]; ctx2.translate(offsets[0], offsets[1]); ctx2.scale(scale, scale); ctx2.fillrect(-offsets[0] / scale, -offsets[1] / scale, demo2.width / scale, demo2.height / scale); ctx.linewidth = newcanvassize.height; pattern = ctx.createpattern(demo2, 'repeat'); ctx.beginpath(); ctx.moveto(firstpnt.x, firstpnt.y); ctx.lineto(firstpnt.x + 100, firstpnt.y); ctx.strokestyle = 'lightgreen'; ctx.stroke(); ctx.strokestyle = pattern; ctx.stroke(); } } class="snippet-code-css lang-css prettyprint-override">canvas { border: 1px solid #000 } class="snippet-code-html lang-html prettyprint-override"><canvas id="demo" width=16 height=16></canvas> <canvas id="demo2"></canvas> <canvas id="demo3" width=600 height=400></canvas>

thanks reading :d

javascript html5 design-patterns canvas