/* eslint-disable */ /* global $, describe, it, xit, xdescribe, after, afterEach, expect*/ describe("composeImages", function() { var placeholder, plot; var composeImages = $.plot.composeImages, canvasData = window.colors.canvasData; beforeEach(function() { placeholder = setFixtures('
') .find('#test-container'); jasmine.addMatchers(window.colors.jasmineMatchers); }); it('should call composeImages on an empty array of sources, so the destination canvas should stay unmodified', function (done) { var sources = placeholder.html('
' + '
' + '' ).find('svg').toArray(); var destinationCanvas = document.getElementById("myCanvas"); function drawCircleOnToCanvas(canvas) { var ctx = canvas.getContext('2d'); ctx.arc(80, 10, 5, 0, 2 * Math.PI); ctx.fill(); } drawCircleOnToCanvas(destinationCanvas); //make sure composeImages won't modify this content composeImages(sources, destinationCanvas).then(function() { expect(canvasData(destinationCanvas, 80, 10, 1, 1)).toMatchPixelColor([0, 0, 0, 255]); expect(destinationCanvas.width).toBe(300); expect(destinationCanvas.height).toBe(150); expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([0, 0, 0, 0]); expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 0, 0, 0]); expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 0, 0]); expect(canvasData(destinationCanvas, 10, 110, 1, 1)).toMatchPixelColor([0, 0, 0, 0]); expect(canvasData(destinationCanvas, 30, 140, 1, 1)).toMatchPixelColor([0, 0, 0, 0]); expect(canvasData(destinationCanvas, 50, 170, 1, 1)).toMatchPixelColor([0, 0, 0, 0]); done(); }, null); }); it('should call composeImages on one SVG as a source', function (done) { var sources = placeholder.html('
' + '' + '' + '' + '' + '' + '
' + '' ).find('svg').toArray(); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(100); expect(destinationCanvas.height).toBe(100); expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); done(); }, null); }); it('should call composeImages on two identical SVGs, one near the other', function (done) { var sources = placeholder.html('
' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
' + '' ).find('svg').toArray(); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(200); //204 - //200 + 2 * 2px_spacing expect(destinationCanvas.height).toBe(100); expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); expect(canvasData(destinationCanvas, 110, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); //110 + 4 expect(canvasData(destinationCanvas, 130, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); //130 + 4 expect(canvasData(destinationCanvas, 150, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //150 + 4 done(); }, null); }); it('should call composeImages on two identical SVGs, one after the other', function (done) { var sources = placeholder.html('
' + '' + '' + '' + '' + '' + '
' + '' + '' + '' + '' + '' + '
' + '' ).find('svg').toArray(); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(100); expect(destinationCanvas.height).toBe(200); //204 - //200 + 2 * 2px_spacing expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); expect(canvasData(destinationCanvas, 10, 110, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); //110 + 4 expect(canvasData(destinationCanvas, 30, 140, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); //140 + 4 expect(canvasData(destinationCanvas, 50, 170, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //170 + 4 done(); }, null); }); it('should call composeImages on three identical SVGs, placed in an L-shape', function (done) { var sources = placeholder.html('
' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
' + '' + '' + '' + '' + '' + '
' + '' ).find('svg').toArray(); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(200); //204 - //200 + 2 * 2px_spacing expect(destinationCanvas.height).toBe(200); //204 - //200 + 2 * 2px_spacing expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); expect(canvasData(destinationCanvas, 110, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); //110 + 4 expect(canvasData(destinationCanvas, 130, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); //130 + 4 expect(canvasData(destinationCanvas, 150, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //150 + 4 expect(canvasData(destinationCanvas, 10, 110, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); //110 + 4 expect(canvasData(destinationCanvas, 30, 140, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); //140 + 4 expect(canvasData(destinationCanvas, 50, 170, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //170 + 4 done(); }, null); }); it('should call composeImages on one canvas as a source', function (done) { var sources = placeholder.html('
' + '' + '
' + '' ).find('#canvasSource').toArray(); var originalCanvas = document.getElementById("canvasSource"); var destinationCanvas = document.getElementById("myCanvas"); drawSomeLinesOnCanvas(originalCanvas); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(20); expect(destinationCanvas.height).toBe(20); expect(canvasData(originalCanvas, 0, 0, 20, 20)) .toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20)); done(); }, null); }); it('should call composeImages on one canvas and one SVG', function (done) { var sources = placeholder.html('
' + '' + '' + '' + '' + '' + '' + '
' + '' ).find('.imgsrc').toArray(); var originalCanvas = document.getElementById("canvasSource"); var destinationCanvas = document.getElementById("myCanvas"); drawSomeLinesOnCanvas(originalCanvas); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(120); //124 - //120 + 2 * 2px_spacing expect(destinationCanvas.height).toBe(100); expect(canvasData(originalCanvas, 0, 0, 20, 20)) .toMatchCanvasArea(canvasData(destinationCanvas, 0, 80, 20, 20)); expect(canvasData(destinationCanvas, 20 + 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); //24 + 10 expect(canvasData(destinationCanvas, 20 + 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); //24 + 30 expect(canvasData(destinationCanvas, 20 + 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //24 + 50 done(); }, null); }); it('should call composeImages on two canvases', function (done) { var sources = placeholder.html('
' + '' + '' + '
' + '' ).find('.imgsrc').toArray(); var originalCanvas1 = document.getElementById("canvasSource1"); var originalCanvas2 = document.getElementById("canvasSource2"); var destinationCanvas = document.getElementById("myCanvas"); drawARectangleOnCanvas(originalCanvas1, "#FF0000"); drawARectangleOnCanvas(originalCanvas2, "#00FF00"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(40); //44 - //2 * 20 + 2 * spacing expect(destinationCanvas.height).toBe(20); expect(canvasData(originalCanvas1, 0, 0, 20, 20)) .toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20)); expect(canvasData(originalCanvas2, 0, 0, 20, 20)) .toMatchCanvasArea(canvasData(destinationCanvas, 20 + 0, 0, 20, 20)); //20 + 4 done(); }, null); }); it('should call composeImages on two partially overlapped canvases', function (done) { var sources = placeholder.html('' + '
' + '' + '' + '
' + '' ).find('.imgsrc').toArray(); var originalCanvas1 = document.getElementById("canvasSource1"); var originalCanvas2 = document.getElementById("canvasSource2"); var destinationCanvas = document.getElementById("myCanvas"); drawARectangleOnCanvas(originalCanvas1, "#FF0000"); drawARectangleOnCanvas(originalCanvas2, "#00FF00"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(30); //34 - //2 * 20 + 2 * spacing - 10 //10px is the offset of the second canvas, defined in style expect(destinationCanvas.height).toBe(20); expect(canvasData(originalCanvas1, 0, 0, 10, 20)) //14 .toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 10, 20)); //14 expect(canvasData(originalCanvas2, 0, 0, 20, 20)) .toMatchCanvasArea(canvasData(destinationCanvas, 20 + 0 - 10, 0, 20, 20)); //20 + 10 - 4 done(); }, null); }); it('should call composeImages on two partially overlapped canvases. Same as above test, but the two canvases have the opposite Z order.', function (done) { var sources = placeholder.html('' + '
' + '' + '' + '
' + '' ).find('.imgsrc').toArray(); var originalCanvas1 = document.getElementById("canvasSource1"); var originalCanvas2 = document.getElementById("canvasSource2"); var destinationCanvas = document.getElementById("myCanvas"); drawARectangleOnCanvas(originalCanvas1, "#FF0000"); drawARectangleOnCanvas(originalCanvas2, "#00FF00"); sources.reverse(); //make sure the images are composed in the inverse order composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(30); //34 - //2 * 20 + 2 * spacing - 10 //10px is the offset of the second canvas, defined in style expect(destinationCanvas.height).toBe(20); expect(canvasData(originalCanvas1, 0, 0, 20, 20)) .toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20)); expect(canvasData(originalCanvas2, 0, 0, 20 - 10 + 0, 20)) //20 - 10 + 4 .toMatchCanvasArea(canvasData(destinationCanvas, 20, 0, 20 - 10 + 0, 20)); //20 - 10 + 4 done(); }, null); }); it('should call composeImages on two separate canvases, where one canvas is outside of view area', function (done) { var sources = placeholder.html('' + '
' + '' + '' + '
' + '' ).find('.imgsrc').toArray(); var originalCanvas1 = document.getElementById("canvasSource1"); var originalCanvas2 = document.getElementById("canvasSource2"); var destinationCanvas = document.getElementById("myCanvas"); drawARectangleOnCanvas(originalCanvas1, "#FF0000"); drawARectangleOnCanvas(originalCanvas2, "#00FF00"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(100 - 0); //100 - 4 expect(destinationCanvas.height).toBe(20); expect(canvasData(originalCanvas1, 0, 0, 20, 20)) .toMatchCanvasArea(canvasData(destinationCanvas, 100 - 20 - 0, 0, 20, 20)); //100 - 20 - 10 + 6 expect(canvasData(originalCanvas2, 0, 0, 20, 20)) .toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20)); done(); }, null); }); it('should call composeImages on one canvas and an SVG, which are totally overlapped with transparency', function (done) { var sources = placeholder.html('' + '
' + '' + '' + '' + '' + '' + '' + '
' + '' ).find('.imgsrc').toArray(); var originalCanvas1 = document.getElementById("canvasSource1"); var destinationCanvas = document.getElementById("myCanvas"); drawARectangleOnCanvas(originalCanvas1, "#FF0000"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(100); expect(destinationCanvas.height).toBe(100); expect(canvasData(originalCanvas1, 0, 0, 20, 20)) .toMatchCanvasArea(canvasData(destinationCanvas, 100 - 40 + 0, 0, 20, 20)); //100 - 40 + 4 expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); done(); }, null); }); it('should call composeImages on one canvas and an SVG, which are totally overlapped with transparency. The SVG has a different size than the ones from other tests. One component of the SVG is partially outside of the view area.', function (done) { var sources = placeholder.html('' + '
' + '' + '' + '' + '' + '' + '' + '
' + '' ).find('.imgsrc').toArray(); var originalCanvas1 = document.getElementById("canvasSource1"); var destinationCanvas = document.getElementById("myCanvas"); drawARectangleOnCanvas(originalCanvas1, "#FF0000"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(250); expect(destinationCanvas.height).toBe(150); expect(canvasData(originalCanvas1, 0, 0, 20, 20)) .toMatchCanvasArea(canvasData(destinationCanvas, 250 - 180 + 0, 150 - 10 - 20, 20, 20)); //250 - 180 + 4 //circle centers expect(canvasData(destinationCanvas, 230, 20, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); expect(canvasData(destinationCanvas, 175, 100, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); expect(canvasData(destinationCanvas, 50, 130, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //other points on circles should match the required colors, because of configured diameters expect(canvasData(destinationCanvas, 220, 17, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); expect(canvasData(destinationCanvas, 190, 114, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); expect(canvasData(destinationCanvas, 80, 149, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //verify a pixel from the circle border, if it comes from a black line (almost black, because of antialiasing), as described in svg style expect(canvasData(destinationCanvas, 79, 102, 1, 1)).toMatchPixelColorWithError([0, 0, 0, 255, 15]); done(); }, null); }); it('should call composeImages on one canvas and an SVG, which are totally overlapped with transparency, using external CSS. The SVG has a different size than the ones from other tests. One component of the SVG is partially outside of the view area.', function (done) { var sources = placeholder.html('' + '
' + '' + '' + '' + '' + '' + '' + '
' + '' ).find('.imgsrc').toArray(); var originalCanvas1 = document.getElementById("canvasSource1"); var destinationCanvas = document.getElementById("myCanvas"); drawARectangleOnCanvas(originalCanvas1, "#FF0000"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(250); expect(destinationCanvas.height).toBe(150); expect(canvasData(originalCanvas1, 0, 0, 20, 20)) .toMatchCanvasArea(canvasData(destinationCanvas, 250 - 180 + 0, 150 - 10 - 20, 20, 20)); //250 - 180 + 4 //circle centers expect(canvasData(destinationCanvas, 230, 20, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); expect(canvasData(destinationCanvas, 175, 100, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); expect(canvasData(destinationCanvas, 50, 130, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //other points on circles should match the required colors, because of configured diameters expect(canvasData(destinationCanvas, 220, 17, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); expect(canvasData(destinationCanvas, 190, 114, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); expect(canvasData(destinationCanvas, 80, 149, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //verify a pixel from the circle border, if it comes from a black line (almost black, because of antialiasing), as described in svg style expect(canvasData(destinationCanvas, 79, 102, 1, 1)).toMatchPixelColorWithError([0, 0, 0, 255, 15]); done(); }, null); }); it('should call composeImages on one dynamically created canvas as a source, without being able to compose', function (done) { var sources = placeholder.html('
' + '
' + '' ).find('#canvasSource').toArray(); var originalCanvas = document.createElement('canvas'); originalCanvas.width = 20; originalCanvas.height = 20; drawSomeLinesOnCanvas(originalCanvas); sources.push(originalCanvas); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(30); expect(destinationCanvas.height).toBe(15); done(); }, null); }); it('should call composeImages on two dynamically created canvas as sources, without being able to compose', function (done) { var sources = placeholder.html('
' + '
' + '' ).find('#canvasSource').toArray(); var originalCanvas = document.createElement('canvas'); originalCanvas.width = 20; originalCanvas.height = 20; drawSomeLinesOnCanvas(originalCanvas); sources.push(originalCanvas); originalCanvas = document.createElement('canvas'); originalCanvas.width = 20; originalCanvas.height = 20; drawSomeLinesOnCanvas(originalCanvas); sources.push(originalCanvas); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(30); expect(destinationCanvas.height).toBe(15); done(); }, null); }); it('should call composeImages on two dynamically created canvas as sources (with left/top properties set), without being able to compose', function (done) { var sources = placeholder.html('
' + '
' + '' ).find('#canvasSource').toArray(); var originalCanvas = document.createElement('canvas'); originalCanvas.width = 20; originalCanvas.height = 20; originalCanvas.left = 0; originalCanvas.top = 0; drawSomeLinesOnCanvas(originalCanvas); sources.push(originalCanvas); originalCanvas = document.createElement('canvas'); originalCanvas.width = 20; originalCanvas.height = 20; originalCanvas.left = 0; originalCanvas.top = 0; drawSomeLinesOnCanvas(originalCanvas); sources.push(originalCanvas); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(30); expect(destinationCanvas.height).toBe(15); done(); }, null); }); it('should call composeImages on one canvas as a source and a dynamically generated destination Canvas', function (done) { var sources = placeholder.html('
' + '' + '
' ).find('#canvasSource').toArray(); var originalCanvas = document.getElementById("canvasSource"); var destinationCanvas = document.createElement("canvas"); destinationCanvas.width = 30; destinationCanvas.height = 15; drawSomeLinesOnCanvas(originalCanvas); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(20); expect(destinationCanvas.height).toBe(20); expect(canvasData(originalCanvas, 0, 0, 20, 20)) .toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20)); done(); }, null); }); xit('should call composeImages on one SVG as a source, which defines only its viewbox, without width and height', function (done) { var sources = placeholder.html('
' + '' + '' + '' + '' + '' + '
' + '' ).find('svg').toArray(); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(600); expect(destinationCanvas.height).toBe(600); expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); done(); }, null); }); xit('should call composeImages on one SVG as a source, which defines only its width and height, without its viewbox', function (done) { var sources = placeholder.html('
' + '' + '' + '' + '' + '' + '
' + '' ).find('svg').toArray(); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(100); expect(destinationCanvas.height).toBe(100); expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); done(); }, null); }); xit('should call composeImages on one potentially unsupported SVG as a source, because it contains "uses". Only its viewBox is defined.', function (done) { var sources = placeholder.html('
' + '' + '' + '' + '' + '' + '' + '' + '' + 'Plot 1' + '' + '' + '' + 'Plot 2' + '' + '' + '
' + '' ).find('svg').toArray(); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(600); expect(destinationCanvas.height).toBe(400); done(); }, null); }); xit('should call composeImages on one potentially unsupported SVG as a source, because it contains "uses". Only the width and height properties are defined.', function (done) { var sources = placeholder.html('
' + '' + '' + '' + '' + '' + '' + '' + '' + 'Plot 1' + '' + '' + '' + 'Plot 2' + '' + '' + '
' + '' ).find('svg').toArray(); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(600); expect(destinationCanvas.height).toBe(400); done(); }, null); }); it('should call composeImages on one potentially unsupported SVG as a source, because it contains "uses". ViewBox, width and height properties are defined.', function (done) { var sources = placeholder.html('
' + '' + '' + '' + '' + '' + '' + '' + '' + 'Plot 1' + '' + '' + '' + 'Plot 2' + '' + '' + '
' + '' ).find('svg').toArray(); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(600); expect(destinationCanvas.height).toBe(400); done(); }, null); }); xit('should call composeImages on one empty SVG as a source. This may block composeImages.', function (done) { var sources = placeholder.html('
' + '' + '' + '
' + '' ).find('svg').toArray(); var destinationCanvas = document.getElementById("myCanvas"); composeImages(sources, destinationCanvas).then(function() { expect(destinationCanvas.width).toBe(600); expect(destinationCanvas.height).toBe(400); done(); }, null); }); function drawSomeLinesOnCanvas(canvas) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(19, 19); ctx.moveTo(3, 18); ctx.lineTo(17, 5); ctx.stroke(); } function drawARectangleOnCanvas(canvas, color) { var ctx = canvas.getContext('2d'); ctx.rect(0, 0, 20, 20); ctx.fillStyle = color; ctx.fill(); } });