Canvas, Rect: Images for patterns are displayed wrong - html

Question

I'm developing a little map-editor just for fun to get to know HTML5 Canvas and stuff a little bit better.
What I want to do
I'm trying to load 3 items:
2 rocks
1 goblin
I wrote a function "drawItem(item)", which should draw me an item to the canvas:
drawItem = function(item) {
var imageObj = new Image();
imageObj.onload = function() {
var pattern = context.createPattern(imageObj, 'repeat');
context.rect(gridSize*item.position[0], gridSize*item.position[1], gridSize, gridSize);
context.fillStyle = pattern;
context.fill();
};
imageObj.src = item.img;
};
What an item-object looks like:
itemOne = {
img : 'https://lh3.googleusercontent.com/ZX4Zl7JT1gkgOVA9FbMFnMAw7TC9bBCVMSGWKFTmOW88vDTgcCOb7tBBo60nxoSdHQ=s190',
position : [0, 0] //these get multiplied with "gridSize" in the drawItem-function
};
Now here's the problem:
If I invoke this function with an item-object, the object gets drawn correctly.
If I invoke this function 3 times with 3 different item-objects (see JS-Fiddle), the 2 rock-items seem to have a goblin on top of it. That's wrong.
JS-Fiddle
http://jsfiddle.net/rSVkb/1/
"Question"
Does anyone know this issue? I've been googling for hours now, but since I'm not really sure what to search for, it's kind of hard to find out.
Many thanks!
Boris

Answer 1

You could simplify the whole process by using drawImage
drawItem = function(item) {
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, gridSize*item.position[0], gridSize*item.position[1])
};
imageObj.src = item.img;
};
http://jsfiddle.net/rSVkb/2/

Answer 2

You should probably be using drawImage as the other answerer said, but for the sake of completeness, let me tell you why your original code was wrong.
In this code:
var pattern = context.createPattern(imageObj, 'repeat');
context.rect(gridSize*item.position[0], gridSize*item.position[1], gridSize, gridSize);
context.fillStyle = pattern;
context.fill();
You are adding a rect to the current path, and then filling the current path.
when you call rect then fill, and then call rect with a different rect and then fill again, the second fill command is filling both of the rects you had defined.
This is because rect always adds an additional rect to the current path.
So one way to fix your code would be to add one line, a call to beginPath(), which would reset the path so that you do not keep adding rects each time you draw:
var pattern = context.createPattern(imageObj, 'repeat');
context.beginPath();
context.rect(gridSize*item.position[0], gridSize*item.position[1], gridSize, gridSize);
context.fillStyle = pattern;
context.fill();
So it should look like this:
http://jsfiddle.net/rSVkb/6/

Answer 3

If you do want to keep using patterns, you need to switch to using fillRect instead of creating a rectangle and using fill:
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;
};
See it in action
.fill 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:
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));
And using those as modifiers for the last 2 arguments in fillRect.
Or lets you do multiple positions on your items like this. You could do that with .drawImage as well, but the pattern only needs to be made once. And this jsperf shows that using a pattern can be much faster.