Develop Reference

Combine two images in one canvas

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/

Javascript error in rails

i start to learn javascript with easy game tutorial http://www.youtube.com/watch?v=U7anheKJSaIand on RoR got error in index.html.erb:
<script>
var ctx, canvas;
var data;
window.onload = function main(){
canvas = document.createElement("canvas");
canvas.width = canvas.height = 200;
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
init();
tick();
}
function init(){
data = new Tile(20,20);
}
function tick(){
window.requestAnimationFrame(tick);
update();
render();
}
function update(){}
function render(){
data.draw(ctx);
}
function Tile(x,y){
var x = x, y = y;
var tile = Tile.BlANK;
if(tile == null){
var _c = document.createElement("canvas");
_c.width = _c.height = 100;
_ctx = _c.getContext("2d");
_ctx.fillStyle = "skyblue";
//blank
_ctx.fillRect(0,0,100,100);
Tile.BlANK = new Image();
Tile.BLANK.src = _c.toDataURL();
tile = Tile.BLANK;
}
this.update = function(){}
this.draw = function(ctx){
ctx.drawImage(tile, x, y);
}
}
</script>
and this is error:
Tile.BLANK.src = _c.toDataURL();
Uncaught TypeError: Cannot set property src of undefined

Your error is here
Tile.BlANK = new Image();
It should be:
Tile.BLANK = new Image();
The error comes from .BlANK and it's because there is a typo. The l (L) is lowecase, and therefore later when you are trying to access the .src in you can't, because the real .BLANK is still undefined.
This is in function Tile(x,y){...}, but you also have the typo some other places. Just check your code for lowercase letters in .BLANK.

How to place the two images in single canvas using asp.net?

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;
}

Canvas DrawImage does not work on IOS Safari

I have a canvas with an id called napkin. When I call the following function it is supposed to draw an image and the napkin canvas onto another canvas in memory. It works on every browser but IOS Safari. The operation does not seem to exceed the IOS memory cap for the canvas. I test this by calling k().toDataURL(). Any ideas?
function k() {
var canvas = document.createElement('canvas');
var napkin = document.getElementById("napkin");
var img = new Image();
img.src = picurl;
var ctx = canvas.getContext("2d");
var imgdata = new Image();
imgdata.src = napkin.toDataURL();
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
ctx.globalAlpha = 0.5;
ctx.drawImage(imgdata, 0, 0);
return canvas;
}

You need to wait for the image data to load before using it...
var img = new Image();
img.onload = function(){
// do stuff here with img
};
img.src = picurl;
// not here

Failed to load resource (Javascript image.src)

I want to ask you what's wrong with my code below :
var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext('2d');
var image = new Image();
image.onload = onLoad;
image.src = './PS_Countdown.jpeg';
ctx.drawImage(image, 25, 25);
function onLoad() {
console.log('Image loaded');
}