HTML Canvas: Why image not getting drawn to canvas? - html

Question

HTML:
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<canvas id="canvas" width="0" height="0"></canvas>
Javascript:
var images = document.getElementsByTagName('img');
var canvas = document.getElementById('canvas');
for (var i = 0; i < images.length; i++) {
canvas.getContext('2d').drawImage(images[i], canvas.width, canvas.height);
canvas.height = canvas.height + images[i].height;
canvas.width = images[i].width;
}
Here's the fiddle:
https://jsfiddle.net/083bapwz/29/
Why is the canvas not visible or I guess, not even getting drawn? I want it to be drawn one after another, first on top, others followed in bottom.

Answer 1

A couple things.
First, changing the canvas width/height dimensions resets all existing canvas state. It is a hackier (and less supported) form of clearRect.
Take the following snippet for example:
var images = document.getElementsByTagName('img');
var canvas = document.getElementById('canvas');
var canvas2 = document.getElementById('canvas2');
var canvas3 = document.getElementById('canvas3');
var ctx1 = canvas.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var ctx3 = canvas3.getContext('2d');
// wont draw
ctx1.moveTo(0, 0);
ctx1.lineTo(100, 100);
ctx1.stroke();
canvas.width = 300;
// wont draw
ctx2.moveTo(0, 0);
ctx2.lineTo(50, 50);
ctx2.stroke();
canvas2.height = 100;
// will draw
ctx3.moveTo(0, 0);
ctx3.lineTo(100, 100);
ctx3.stroke();
#canvas{border: 1px solid red;}
#canvas2{border: 1px solid blue;}
#canvas3{border: 1px solid green;}
<canvas id="canvas" width="200" height="200"></canvas>
<canvas id="canvas2" width="200" height="200"></canvas>
<canvas id="canvas3" width="200" height="200"></canvas>
In other words, don't resize the canvas since the last image would be the only one to draw.
Second, you are telling the image to draw at the (x, y) position of the canvas.width and canvas.height. This mean you will be drawing the image here:
You need to specify the (top, left) x/y values for the image drawing.
Hope this helps.
EDIT:
Possible solution could be the following demo:
var images = document.getElementsByTagName('img');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imageArray = Array.from(images);
// add all image heights together
var canvasHeight = imageArray.reduce(function (acc, img) {
acc += img.height;
return acc;
}, 0);
// just use first image as the width for this example
var canvasWidth = imageArray[0].width;
// set all canvas state prior to draws
canvas.height = canvasHeight;
canvas.width = canvasWidth;
var top = 0;
for (var i = 0; i < imageArray.length; i++) {
var image = imageArray[i];
// use x of 0 to draw on left most of canvas
canvas.getContext('2d').drawImage(image, 0, top);
top += image.height;
}