Criei uma função padronizada para acelerar o processo de desenho em um projeto que envolve canvas múltiplos.
Agradeço a colaboração de bfavaretto https://pt.stackoverflow.com/users/74/bfavaretto
Vejam a função: (ela funciona corretamente)
var drawIt = function (canvasCtx, drawObj, x, y) {
drawObj.onload = function () {
canvasCtx.drawImage(drawObj, x, y);
};
};
Chamei os diversos canvas no script: (e foram inicializados corretamente):
var c1Canvas = document.getElementById("c1");
var c1Ctx = c1Canvas.getContext("2d");
var c2Canvas = document.getElementById("c2");
var c2Ctx = c2Canvas.getContext("2d");
var c3Canvas = document.getElementById("c3");
var c3Ctx = c3Canvas.getContext("2d");
var c4Canvas = document.getElementById("c4");
var c4Ctx = c4Canvas.getContext("2d");
Vejam fragmento HTML5:
<div class="gfwrapper">
<canvas id="c1" width="800" height="600"></canvas>
<canvas id="c2" width="800" height="600"></canvas>
<canvas id="c3" width="800" height="600"></canvas>
<canvas id="c4" width="800" height="600"></canvas>
</div>
E deste ponto criei objetos para as imagens que deveriam ser adicionadas ao Canvas:
var image1 = new Image();
image1.src = "http://folhaz.com.br/cms/wp-content/uploads/2014/02/carnaval-300x237.jpg";
var image2 = new Image();
image2.src = "https://www.google.com.br/images/srpr/logo11w.png";
var image3 = new Image();
image3.src = "http://folhaz.com.br/cms/wp-content/uploads/2012/10/sky-tv.jpg";
var image4 = new Image();
image4.src = "http://folhaz.com.br/cms/wp-content/uploads/2013/12/web300x180px1.jpg";
Porém, para a minha surpresa, não consigo adicionar o mesmo objeto de imagem em canvas diferentes.
Vejam o código abaixo.
function drawScreen() {
drawIt(c1Ctx, image1, 0, 0);
drawIt(c2Ctx, image2, 0, 0);
drawIt(c3Ctx, image3, 0, 0);
drawIt(c4Ctx, image4, 0, 0);
drawIt(c4Ctx, image1,100,100);
}
drawScreen();
A image1 foi adicionada inicialmente ao c1. Ao tentar adicioná-la ao c4, a image1 é apagada do c1 e desenhada no c4. Gostaria que a imagem fosse mantida em c1, sem precisar renomear o objeto.
Alguém sabe um workaround para isso? É possível?
Segue JSFiddle para ajudar: http://jsfiddle.net/LeoTheTitan/vV69K/