Am new to concept of virtual canvas, any idea why the below code does not work?
<script type="text/javascript">
$(document).ready(function () {
var c1 = document.createElement('canvas');
var ctx1 = c1.getContext("2d");
var c2 = document.getElementById('Canvas2');
var ctx2 = c2.getContext("2d");
c1.width = c2.width;
c1.height = c2.height;
img1 = new Image();
img1.src = 'A1.png';
img1.onload = function () {
ctx1.drawImage(this, 0, 0);
};
imgdata = ctx1.getImageData(0, 0, c2.width, c2.height);
ctx2.putImageData(imgdata, 0, 0);
});
</script>
<canvas id="Canvas2" style="display:block;position:absolute;background-color:transparent;border:1px solid red;">
Your browser does not support the HTML5 canvas tag.
</canvas>
The concept works if i draw Rectangle or any other objects but when i am loading images it
does not display the images loaded on virtual canvas. As below example works fine.
$(document).ready(function () {
var c1 = document.createElement('canvas');
var ctx1 = c1.getContext("2d");
var c2 = document.getElementById('Canvas2');
var ctx2 = c2.getContext("2d");
c1.width = c2.width;
c1.height = c2.height;
ctx1.fillRect(0, 20, 20, 20);
imgdata = ctx1.getImageData(0, 0, c2.width, c2.height);
ctx2.putImageData(imgdata, 0, 0);
});
You must also wait with getImageData etc. until the image has loaded, so move everything that needs to be done after the image has loaded inside the onload handler (or wrap them in a function called from onload):
img1.onload = function () {
ctx1.drawImage(this, 0, 0);
imgdata = ctx1.getImageData(0, 0, c2.width, c2.height);
ctx2.putImageData(imgdata, 0, 0);
};
If you don't then the image may not be loaded and drawn to canvas when you call getImageData which results in a blank byte array.
Related
I have a problem with canvas. Let's say, 1/10 time I have black square instead of my image, on chrome. My code is as follow, how can I modify it in order to avoid this black display?
<canvas id="Canvas" width="954" height="267"></canvas>
<script>
var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");
// Map sprite
var mapSprite = new Image();
mapSprite.src = 'image.png';
var main = function () {
draw();
};
var draw = function () {
// Clear Canvas
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw diagramme
context.drawImage(mapSprite, 0, 0, 954, 267);
}
main();
</script>
EDIT 1: full function draw :
var draw = function () {
// Clear Canvas
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw diagramme
context.drawImage(mapSprite, 0, 0, nextWidth, nextHeight);
//draw all precedent cross
cross = new Image();
cross.src = "cross.png";
for (var i = 0; i < array_x.length; i++) {
context.drawImage(cross, array_x[i], array_y[i], 10, 10);
}
}
I believe you want to wait until image is loaded.
Replace:
main();
With:
mapSprite.addEventListener('load', main);
Here is my code. I am uploading a image and using like this :
> var canvas = document.createElement('canvas');
> var context = canvas.getContext('2d');
> context.drawImage(image, 0, 0);
This works fine but if I copy the imagedata like below to another canvas. It loads image partially.
var canvas = document.getElementById('myCanvas');
var context1 = canvas.getContext('2d');
context1.putImageData(context.getImageData(0, 0, image.width, image.height), 0, 0);
I tried same approach by creating two canvas and this code which worked fine but without image.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 300);
var d = document.getElementById("myCanvas1");
var btx = d.getContext('2d');
var imgData = ctx.getImageData(0, 0, 300, 300);
btx.putImageData(imgData, 0, 0);
If i create two canvas it works fine but not like the above where I am using in memory canvas.
My HTML file has this :
<canvas id="myCanvas" width="960" height="960"></canvas>
<canvas id="myCanvas1" width="960" height="960"></canvas>
When you create canvases, you need to set their width manually. Default canvas size is 300x150. From here HTMLCanvasElement.
Something like this:
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
To copy one canvas to another use drawImage rather than getImageData, setImageData That way you will use the GPU to move the pixels rather than the CPU. You also have the option to resize, crop, and apply a variety of FXs.
// create a copy of canvasSource
// returns the newly created canvas.
function copyCanvas(canvasSource){
var canvasCopy = document.createElement("canvas");
canvasCopy.width = canvasSource.width;
canvasCopy.height = canvasSource.height;
canvasCopy.getContext("2d").drawImage(canvasSource, 0, 0);
return canvasCopy;
}
The title is poorly worded but there's no way to concisely describe the problem. I'm drawing images to the 2D context of a dynamically created canvas. The data of the context is then saved to an image via toDataURL, which is then draw on every frame. The code below is condensed, I will be drawing multiple images to the context, not just one; which is why I'm saving to an image. I will only draw part of the image at once but the image remains constant so I thought this was the best method, if there are alternatives I will happily accept those as answers.
In short: many images drawn on an image. Part of the image draw each frame.
The code below works:
var picture = new Image();
picture.src = "images/tilesheet.png";
var canvas = document.getElementById("background");
var context = canvas.getContext("2d");
function generate(){
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = canvas.width;
ctx.canvas.height = canvas.height;
ctx.fillStyle = "red";
ctx.rect (0, 0, 40, 40);
ctx.fill();
ctx.drawImage(picture,0,0);
image = new Image();
image.src = ctx.canvas.toDataURL("image/png");
}
function draw(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0,0,100,100,0,0,100,100);
}
function play(){
generate();
setInterval(function(){draw();}, 0.0333);
}
window.onload = function(){
if(picture.complete)play();
else picture.onload = play;
}
<canvas id="background"></canvas>
However this doesn't:
window.Game = {};
canvas = document.getElementById("background");
var tilesheet = new Image();
tilesheet.src = "images/tilesheet.png";
(function(){
function Map(){
this.width = 2736;
this.height = 2736;
this.image = null;
}
Map.prototype.generate = function(){
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = this.width;
ctx.canvas.height = this.height;
ctx.fillStyle = "red";
ctx.rect (0, 0, 40, 40);
ctx.fill();
ctx.drawImage(tilesheet,0,0);
this.image = new Image();
this.image.setAttribute('crossOrigin', 'anonymous');
this.image.src = ctx.canvas.toDataURL("image/png");
}
Map.prototype.draw = function(context){
context.drawImage(this.image, 0,0, context.canvas.height, context.canvas.height, 0, 0, context.canvas.height, context.canvas.height);
}
Game.Map = Map;
})();
(function(){
var room = new Game.Map();
room.generate();
var draw = function(){
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
room.draw(canvas.getContext("2d"));
}
Game.play = function(){setInterval(function(){draw();}, 0.0333);}
})();
window.onload = function(){
if(tilesheet.complete)Game.play();
else tilesheet.onload = Game.play;
}
<canvas id="background"></canvas>
It seems therefore, that the problem is lying in the fact that I'm using function objects but I'm not sure. What am I doing wrong? There are no errors in the debug console.
Those two have different execution order.
First one:
...
Attach image.onload
Call generate()
...
Second one:
...
Call generate()
Attach image.onload
...
That's why it's not working - generate() expects image to be loaded, however second case order doesn't guarantees it.
Instead of
...
room.generate();
...
Game.play = function(){setInterval(function(){draw();}, 0.0333);}
do this
...
Game.play = function(){
room.generate();
setInterval(function(){draw();}, 0.0333);
}
I'm designing a simple app for which I need to use multiple globalCompositeOperation, and therefore I need to use multiple hidden items, then merge them to get the final result.
one of the canvas items is used to drawImage() and then use it as an alpha mask.
I assumed that on 2nd canvas if I use to draw 1st canvas, it will copy it exactly so I can add 2nd thing on top of it. It does copy only the fillRect() and ignores the drawImage() function...
Any idea how can I forward entire content of the first canvas to 2nd? I need the masked part to move to the 2nd canvas.
Been stuck on it for hours and need your help. Tried to use toDataUrl("image/png") and then output that into 2nd canvas, but getting same results :(
simplified version under:
http://jsfiddle.net/EbVmm/17/
Thanks
var c1 = document.getElementById("canvas1");
var c2 = document.getElementById("canvas2");
function drawScene(mainColour) {
var ctx = c1.getContext("2d");
var alphaPath = "http://eskarian.com/images/alpha-test.png";
var alphaObj = new Image();
alphaObj.src = alphaPath;
ctx.fillStyle = mainColour;
ctx.fillRect(0, 0, 200, 300);
ctx.globalCompositeOperation = 'xor';
alphaObj.onload = function () {
ctx.drawImage(alphaObj, 0, 0);
};
};
function addScene(colour) {
var ctx2 = c2.getContext("2d");
ctx2.drawImage(c1, 0, 0);
ctx2.globalCompositeOperation = "source-over";
ctx2.fillStyle = colour;
ctx2.fillRect(50, 50, 100, 100);
};
You are trying to use alphaObj before it is fully loaded.
Try something like this:
var c1 = document.getElementById("canvas1");
var c2 = document.getElementById("canvas2");
var alphaPath = "http://eskarian.com/images/alpha-test.png";
var alphaObj = new Image();
alphaObj.onload = function () {
drawScene(mainColour);
addScene(colour)
};
alphaObj.src = alphaPath;
function drawScene(mainColour) {
var ctx = c1.getContext("2d");
ctx.drawImage(alphaObj, 0, 0);
ctx.fillStyle = mainColour;
ctx.fillRect(0, 0, 200, 300);
ctx.globalCompositeOperation = 'xor';
};
function addScene(colour) {
var ctx2 = c2.getContext("2d");
ctx2.drawImage(c1, 0, 0);
ctx2.globalCompositeOperation = "source-over";
ctx2.fillStyle = colour;
ctx2.fillRect(50, 50, 100, 100);
};
I am trying to draw canvas image from image source.
This below code sinppet is working fine but in IOS-- iPad-chrome and mac-safari not working for first time it is working fine from next try. Don't know where I was wrong. Please help me to get rid of this issue.
var canvas = document.getElementById("canvasThumbResult");
var context = canvas.getContext("2d");
var img = document.getElementById("ImagSrc");
context.drawImage(img, x, y, wi, hi, 0, 0, wi, hi);
var dataURL = canvas.toDataURL("image/jpeg");
$("#CanvasImg").attr("src", dataURL);
$("#CanvasImg").show();
You have to wait for the image to load:
var canvas = document.getElementById("canvasThumbResult");
var context = canvas.getContext("2d");
var img = document.getElementById("ImagSrc");
if (img.complete) {
draw();
} else {
img.onload = function() { draw(); };
}
function draw() {
context.drawImage(img, x, y, wi, hi, 0, 0, wi, hi);
var dataURL = canvas.toDataURL("image/jpeg");
$("#CanvasImg").attr("src", dataURL);
$("#CanvasImg").show();
}