Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you do want to keep using patterns, you need to switch to using <code>fillRect</code> instead of creating a rectangle and using <code>fill</code>:</p> <pre><code>drawItem = function(item) { var imageObj = new Image(); imageObj.onload = function() { var pattern = context.createPattern(imageObj, 'repeat'); context.fillStyle = pattern; context.fillRect(gridSize*item.position[0], gridSize*item.position[1], gridSize, gridSize); }; imageObj.src = item.img; }; </code></pre> <h2><a href="http://jsfiddle.net/rSVkb/3/" rel="nofollow">See it in action</a></h2> <p><code>.fill</code> was applying the current pattern on the entire context that had been filled already. Continuing to use pattern would allow you to draw multiple in a row doing something like:</p> <pre><code>itemOne = { img : 'https://lh3.googleusercontent.com/ZX4Zl7JT1gkgOVA9FbMFnMAw7TC9bBCVMSGWKFTmOW88vDTgcCOb7tBBo60nxoSdHQ=s190', position : [0, 0], //these get multiplied with "gridSize" in the drawItem-function howManyX: 2, howManyY: 1 }; // And then in drawImage context.fillRect(gridSize*item.position[0], gridSize*item.position[1], gridSize*(item.howManyX || 1), gridSize*(item.howManyY || 1)); </code></pre> <p>And using those as modifiers for the last 2 arguments in <code>fillRect</code>.</p> <p>Or lets you do multiple <code>positions</code> on your items like <a href="http://jsfiddle.net/rSVkb/4/" rel="nofollow">this</a>. You could do that with <code>.drawImage</code> as well, but the pattern only needs to be made once. And this <a href="http://jsperf.com/drawimage-vs-canvaspattern/7" rel="nofollow">jsperf</a> shows that using a pattern can be much faster.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload