How to create Half Drop and Half Brick pattern using canvas

Question

I have created an image like this using canvas

I want to create an image like this using canvas

This is the code that i have done yet.

<div id="canvas_div" style="z-index:15; line-height: 1">
    <img src="http://www.tiikoni.com/tis/view/?id=5eaacda" id="uploaded_image" style="display:none;">
    <canvas id="canvasBottom" width="490" height="425"></canvas>
    <canvas id="designCanvas" width="470" height="405"></canvas>
</div>

var canvas = document.getElementById('designCanvas');
var ctx = canvas.getContext('2d');
var img = document.createElement('img');
img.setAttribute('crossOrigin', 'anonymous');
img.src = window.localStorage.getItem('design_image');
var imgwidth = 0;
var imgheight = 0;
img.onload = function() { 
  imgwidth = img.width / 6.5;
  imgheight = img.height / 6.5;
  fillPattern(this, imgwidth, imgheight)
};

var canvas2 = document.getElementById("canvasBottom");
var ctx2 = canvas2.getContext("2d");

drawRulers(ctx2, 20, 25, 25);

function drawRulers(t, e, n, s) {
  i = 20;
  var o = document.getElementById("designCanvas"),
      r = displayWidth(o, i),
      a = displayHeight(o, i);
  t.fillStyle = "#efefef", t.fillRect(i, 0, r, i), t.fillRect(0, i, i, a), t.fillStyle = "#333333", t.fillRect(0, 0, i, i), t.beginPath(), t.font = "12px Lato", t.fillStyle = "#ffffff", t.textAlign = "center", t.fillText("in.", i / 2, i - 5);
  var l = !0,
      c = !0;
  t.fillStyle = "#333333";
  for (var d = 1; n >= d; d += 1) {
    var h = d * e,
        u = d + "";
    12 > n && !l || 32 > n && !l && c || n >= 32 && d % 12 == 0 ? t.fillText(u, h + i, i - 3) : t.fillText(l ? "\u0131" : "|", h + i, i - 2), l = !l, l || (c = !c)
  }
  l = !0, c = !0, t.textAlign = "right";
  for (var p = 1; s >= p; p += 1) {
    var f = p * e;
    u = p + "", 12 > s && !l || 32 > s && !l && c || s >= 32 && p % 12 == 0 ? t.fillText(u, i - 1, f + i + 2, 18) : t.fillText(l ? "-" : "\u2014", i, f + i + 1, 18), l = !l, l || (c = !c)
  }
}

function displayWidth(t, e) {
  return t.width - e
}

function displayHeight(t, e) {
  return t.height - e
}

function fillPattern(img, w, h) {
  ctx.drawImage(img, 0, 0, w, h);

  while (w < canvas.width) {
      ctx.drawImage(canvas, w, 0);
      w *= 2;
  }
  while (h < canvas.height) {
      ctx.drawImage(canvas, 0, h);
      h *= 2;
  }
}

Please guide me what to do to make it like the desired image.

Any help would be appreciated.

@Teemu it is giving me image like this https://i.stack.imgur.com/AIvSH.png — Ravinder Singh, Oct 17 '16 at 14:03
But i want to create canvas like this https://i.stack.imgur.com/y8kGt.png — Ravinder Singh, Oct 17 '16 at 14:04
@Dekel, Can you guide me in creating it like this : websyms.com/html/mirror.png this is something like : websyms.com/html/Mirror_HOVER.png — Ravinder Singh, Oct 18 '16 at 14:15
@RavinderSingh, I didn't have time to check it, yet. But if you can use 4 different images (as a source) It would be much easier I think... (instead of rotating them) — Dekel, Oct 20 '16 at 11:44
@Dekel, I have tried your solution but still it doesn't work : https://jsfiddle.net/7r9ej2q1/3/ Please help — Ravinder Singh, Oct 20 '16 at 14:55
For this solution to work you need the original image to be rotated (and not rotate using css `transform`. — Dekel, Oct 20 '16 at 17:06
@Dekel, i have done it. Check this: https://jsfiddle.net/7r9ej2q1/6/ — Ravinder Singh, Oct 21 '16 at 07:58
@RavinderSingh, very nice! You can add it as a new answer (with the explanation regarding the rotation of the images). I'll sure vote your answer here :) — Dekel, Oct 21 '16 at 13:24
@Dekel, i have got a new request. Can you help in creating something like this http://websyms.com/html/show_image.png ? — Ravinder Singh, Oct 26 '16 at 13:22
To tell you the truth, it sounds like a job you are getting paid for. If you already tried and something doesn't work I think the best thing is to open a new question explaining exactly the problem and you might get help. — Dekel, Oct 26 '16 at 13:24
@Dekel, i m learning canvas. I want to create any type of image through canvas. I have no clue how to create a image like http://websyms.com/html/show_image.png. That's why i asked for help. — Ravinder Singh, Oct 26 '16 at 14:06
I think it's not related anymore to this question so it's better to open a new one — Dekel, Oct 26 '16 at 14:18

score 2 · Accepted Answer · answered Oct 17 '16 at 15:02

2

Instead of repeating the canvas you should repeat the drawing of the image in the correct position:

function fillPattern(img, w, h) {
    origW = w;
    origH = h;

    i = 0
    w = 0;
    h = 0;

    while (h < canvas.height + origH) {
        while (w < canvas.width) {
            ctx.drawImage(img, w, i % 2 == 0 ? h : (h + origH / 2 * -1), origW, origH);
            w += origW;
            i++;
        }
        h += origH;
        i = 0;
        w = 0;
    }
}

This is the working jsfiddle:
https://jsfiddle.net/7r9ej2q1/

answered Oct 17 '16 at 15:02

Dekel

60,707
10
101
129

That's great. Perfect. Thank you so much – Ravinder Singh Oct 18 '16 at 05:39
Can you guide me in creating it like this : http://websyms.com/html/mirror.png this is something like : http://websyms.com/html/Mirror_HOVER.png – Ravinder Singh Oct 18 '16 at 05:56
well, this is a completely different question and I'm not so sure how it's related to the original one :) – Dekel Oct 18 '16 at 14:20
Please help, i m trying for this since last 12 days. – Ravinder Singh Oct 18 '16 at 14:25
The problem is mostly that I don't really understand the question. – Dekel Oct 18 '16 at 14:25
The original question is about a tile (with offset), and this new image is related to mirroring... and I'm not sure what is the final output you are looking for. – Dekel Oct 18 '16 at 14:26
i have upvoted and accepted it. The question is, i want to create pattern like this http://websyms.com/html/mirror.png. If you closely look at pattern, you will see that the pattern is like this, http://websyms.com/html/Mirror_HOVER.png – Ravinder Singh Oct 19 '16 at 05:59
ok, now I see what you wanted :) it's more clear. I'll try to think about a solution here... – Dekel Oct 19 '16 at 07:16
I don't have the time to work on in atm but you can check this: http://stackoverflow.com/questions/3793397/html5-canvas-drawimage-with-at-an-angle It can help you with the rotation of the image. – Dekel Oct 19 '16 at 07:26
I have tried it and it's not working. Can you please help me out. – Ravinder Singh Oct 19 '16 at 12:45
can you please help me out? – Ravinder Singh Oct 20 '16 at 05:13

How to create Half Drop and Half Brick pattern using canvas

1 Answers1