I am using this code to display data of two canvas into third canvas but it is not working.
I am saving the two canvas data using localstorage and passing it to third canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//First canvas data
var img1 = loadImage(localStorage.getItem('cbdata'), main);
//Second canvas data
var img2 = loadImage(localStorage.getItem('cbdata1'), main);
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
if (imagesLoaded == 2) {
// composite now
ctx.drawImage(img1, 0, 0);
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 0, 0);
}
}
function loadImage(src, onload) {
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}
Your code works. Check that the content of localStorage.getItem is non-empty. And I also slightly modified display of the images by changing ctx.drawImage commands:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//First canvas data
var img1 = loadImage('http://ep01.epimg.net/elpais/imagenes/2015/10/21/ciencia/1445444934_907402_1445781076_portada_normal.jpg', main);
//Second canvas data
var img2 = loadImage('http://ep01.epimg.net/economia/imagenes/2015/10/22/actualidad/1445508003_507635_1445508894_portada_normal.jpg', main);
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
if (imagesLoaded == 2) {
// composite now
ctx.drawImage(img1, 0, 0, 100, 100);
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 100, 0, 100, 100);
}
}
function loadImage(src, onload) {
console.log('loadImage', src);
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}
https://jsfiddle.net/4Le4g8ta/
Related
var canvas = document.getElementById("canvas");
wheel = canvas.getContext("2d");
for (var i = 0; i < 10; i++) {
var img = new Image;
img.src = image;
wheel.drawImage(img, -170, -10, 140, 140);
}
My above code draw only 9(Nine) images but lastOne(10th) image not drawing on canvas. I tried above code but not getting success. Anyone can know solution for this problem.
Can any one help me to find out online JSFiddle Demo which draw image on canvas in loop.
Perhaps your image isn't finished loading before your first draw attempt.
Here is the syntax to make sure your image has finished loading:
var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.width = 1100;
canvas.height = 110;
var wheel = canvas.getContext("2d");
var img = document.createElement("img");
img.onload = function() {
for (var i = 0; i < 10; i++) {
wheel.drawImage(img, 5 + 110 * i, 5);
}
};
img.src = "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100";
EDIT 1 - PROMISES
Working with multiple images:
List sources
map to generates DOM nodes
Setup a Promise per DOM node in a Promise.all
Then draw images
var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.width = 1100;
canvas.height = 110;
var wheel = canvas.getContext("2d");
var images = [
"https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=2&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=3&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=4&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=5&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=6&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=7&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=8&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=9&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=10&w=100&h=100",
]
.map(function(i) {
var img = document.createElement("img");
img.src = i;
return img;
});
Promise.all(images.map(function(image) {
return new Promise(function(resolve, reject) {
image.onload = resolve;
});
}))
.then(function() {
for (var i = 0; i < images.length; i++) {
var img = images[i];
wheel.drawImage(img, 5 + 110 * i, 5);
}
});
I would do the similar approach to Emil, only difference having a method that loads them individually and once the image is loaded, try to load the next one and so on ...
take a look:
var canvas = document.getElementById("canvas");
// setting canvas size
canvas.height = window.innerHeight - 10;
canvas.width = window.innerWidth - 10;
var image_test = document.querySelector(".hidden");
var count = 0;
var total_images = 10;
var wheel = canvas.getContext("2d");
function loadImage() {
var img = new Image();
img.onload = function() {
wheel.drawImage( this , 105 * count , 0 , 100, 100);
if( count < total_images ) {
count++;
loadImage();
}
}
// img.src = "image-" + count + ".jpg";
img.src = "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100";
}
loadImage();
https://jsfiddle.net/gugalondon/r5xw6u7L/7
I am trying to take a pattern and apply it over a png image but only cover the non-transparent part of the image similar to this one.
http://jsfiddle.net/eLmmA/1/
$(function() {
var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = 'http://i.stack.imgur.com/QtQrZ.png';
}
img.src = 'http://i.stack.imgur.com/MDGFY.jpg';
document.body.appendChild(canvas);
});
The example above is really close to what I want but I need to be able to use a smaller texture image and repeat it over the none pattern image. I am not familiar with how to use canvas properly but trying to learn more about it.
Thanks in advance!
Never mind I figured it out.
var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
var ptrn = canvas_context.createPattern(img, 'repeat');
canvas_context.fillStyle = ptrn;
canvas_context.fillRect(0, 0, canvas.width, canvas.height);
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = $('#base_url').data('base')+'assets/themes/img/download.png';
}
img.src = $('#base_url').data('base')+'assets/uploads/thumbs/1381413411Purple-Night-Owls-thumb.jpg';
$('#itemPreview').html(canvas);
i have a canvas with the following images loaded:
Background Image:
Front Image:
Both together looks like this image:
Now i want to apply a feather effect to the hand boarders to result in to something like this:
I tried the following solution so far. But the result is not like on the above image.
var temp = document.createElement('canvas'),
tx = temp.getContext('2d');
temp.width = scope.canvas.width;
temp.height = scope.canvas.height;
tx.translate(-temp.width, 0);
tx.shadowOffsetX = temp.width;
tx.shadowOffsetY = 0;
tx.shadowColor = '#000';
tx.shadowBlur = 100;
var img = new Image();
img.onload = function() {
tx.drawImage(img, 0, 0, 512, 512);
};
img.src = imageURL; // the hand image
var temp2 = document.createElement('canvas'),
tx2 = temp2.getContext('2d');
temp2.width = scope.canvas.width;
temp2.height = scope.canvas.height;
var img2 = new Image();
img2.onload = function() {
tx2.drawImage(img2, 0, 0, 512, 512);
tx2.save();
tx2.globalCompositeOperation = 'destination-out';
tx2.drawImage(temp, 0, 0);
tx2.restore();
};
img2.src = temp.toDataURL("image/png");
Any idea how to solve this?
Regards
Steve
To feather an image, create a copy of it via a new canvas, create an invers mask of the image with destination-out comp. Then draw the hand again and then mask with destination-ou but with a shadow to create the feather.
var canvas = document.createElement("canvas");
canvas.width = 1024,canvas.height = 1024;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
var hand = new Image();
hand .src = "http://i.stack.imgur.com/PbAfc.png";
hand .onload = function(){
var can = document.createElement("canvas");
can.width = this.width;
can.height = this.height;
ct = can.getContext("2d");
// create inverted mask
ct.fillStyle = "black";
ct.fillRect(0,0,this.width,this.height);
ct.globalCompositeOperation = "destination-out";
ct.drawImage(this,0,0);
// create second canvas
var can1 = document.createElement("canvas");
can1.width = this.width;
can1.height = this.height;
ct1 = can1.getContext("2d");
// draw image
ct1.drawImage(this,0,0);
ct1.shadowColor = "black";
ct1.shadowBlur = 30; // amount of feather
ct1.globalCompositeOperation = "destination-out";
ct1.drawImage(can,0,0);
ct1.shadowBlur = 20; // amount of feather
ct1.drawImage(can,0,0); // The mor you draw the greater the FX
ct1.shadowBlur = 10; // amount of feather
ct1.drawImage(can,0,0); // The mor you draw the greater the FX
ct1.globalCompositeOperation = "source-over";
ct.globalCompositeOperation = "source-over";
ctx.drawImage(can1,0,0);
// use the new canvas can1 as the hand image in later code.
}
//ctx.fillStyle = "#e19e9e"
ctx.fillRect(0,0,1024,1024);
As far as I can see my code is exactly like the code on W3schools except im making a new image instead of using one already in the html, but i cant get it to display anything
<body>
<center><canvas id="myCanvas" width="1000" height="750"></canvas></center>
<script>
function newImage(src, width, height) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
return img;
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750);
ctx.drawImage(i,0,0);
</script>
The problem appears because you return image object before it is fully downloaded. Because of that canvas fails to render image data as background image.
You should make use of onload callback function and drawImage only when image data is completely available. This should work:
function newImage(src, width, height, callback) {
var img = new Image();
img.width = width;
img.height = height;
img.onload = function () {
callback(img);
};
img.src = src;
}
var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d");
newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750, function(image) {
ctx.drawImage(image, 0, 0);
});
Note how instead of returning image from newImage function, you pass callback function in it and invoke it once download complete.
function newImage(src, width, height, callback) {
var img = new Image();
img.width = width;
img.height = height;
img.onload = function () {
callback(img);
};
img.src = src;
}
var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d");
newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750, function(image) {
ctx.drawImage(image, 0, 0);
});
<canvas id="myCanvas" width="1000" height="750"></canvas>
function draw()
{
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function()
{
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
};
img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
}
I have this function in this code two images are placing in canvas but within few sec second img is moving to other place.i want to place both img in canvas how to do?
Try this code, hope this help: DEMO FIDDLE
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img1 = loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main);
var img2 = loadImage('http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg', main);
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
if (imagesLoaded == 2) {
// composite now
ctx.drawImage(img1, 0, 0);
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 0, 0);
}
}
function loadImage(src, onload) {
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}