We Keep Coding

Writing to A4 pdf giving wrong size image

I am trying to write to an A4 PDF
form = document.querySelector("#theform");
html2canvas(form).then(function(canvas) {
doc = new jsPDF({
unit: 'pt',
format: 'a4',
});
for (var i = 0; i <= form.clientHeight/842; i++) {
//! This is all just html2canvas stuff
var srcImg = canvas;
var sX = 0;
var sY = 842*i;
var sWidth = 595;
var sHeight = 842;
var dX = 0;
var dY = 0;
var dWidth = 595;
var dHeight = 842;
window.onePageCanvas = document.createElement("canvas");
onePageCanvas.setAttribute('width', 595);
onePageCanvas.setAttribute('height', 842);
var ctx = onePageCanvas.getContext('2d');
ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);
var canvasDataURL = onePageCanvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height);
var hratio = hgt/wid
const pdfWidth = doc.internal.pageSize.width;
const TheHeight = doc.internal.pageSize.width;
const pdfHeight = TheHeight
if (i > 0) {
doc.addPage(595, 842);
}
//! now we declare that we're working on that page
doc.setPage(i+1);
doc.addImage(canvasDataURL, 'PNG', 10, 10, pdfWidth, pdfHeight);
}
doc.autoPrint();
window.open(doc.output('bloburl'), '_blank');
}
But the it is only creating a PDF for part of the left hand side and I can't see anything wrong.. It is as though what it is writing to the PDF is twice the size it should be.

How to fix "TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'"?

I am a beginner JavaScript programmer and I am following a book called "Create with < code >" and I am having trouble with the code. I have been following along with the book but when I have tried running it, I get this error:
Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)
I have been typing the code into a plain-text editor and viewing it on Chrome. How do I fix this error?
If you run the snippet you should be able to see the error.
//CONSTANTS
var CANVAS_WIDTH = 800;
var CANVAS_HEIGHT = 600;
var GROUND_Y = 540;
//SETUP
var canvas = document.createElement('canvas');
var c = canvas.getContext('2d');
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;
document.body.appendChild(canvas);
var cameraX = 0;
var bushData = generateBushes();
var bush1Image = new Image();
bush1Image.src = 'bush1.png';
var bush2Image = new Image();
bush2Image.src = 'bush2.png';
window.addEventListener('load', start);
function start() {
window.requestAnimationFrame(mainLoop);
}
function generateBushes() {
var generatedBushData = [];
var bushX = 0;
while (bushX < (2 * CANVAS_WIDTH)) {
var bushImage;
if (Math.random() >= 0.5) {
bushImage = bush1Image;
} else {
bushImage = bush2Image
}
generatedBushData.push({
x: bushX,
y: 80 + Math.random() * 20,
image: bushImage
});
bushX += 150 + Math.random() * 200;
}
return generatedBushData;
}
//MAIN LOOP
function mainLoop() {
update();
draw();
window.requestAnimationFrame(mainLoop);
}
//UPDATING
function update() {
//Update bushes.
for (var i = 0; i < bushData.length; i++) {
if ((bushData[i].x - cameraX) < -CANVAS_WIDTH) {
bushData[i].x += (2 * CANVAS_WIDTH) + 150;
}
}
}
//DRAWING
function draw() {
//Draw the bushes
for (var i = 0; i < bushData.length; i++) {
c.drawImage(
bushData[i].image,
bushData[i].x,
GROUND_Y - bushData[i].y);
}
}

DanieleAlessandra put his finger on the error in a comment: image in the objects in bushData is undefined, because you're calling generateBushes too soon. You have:
var bushData = generateBushes();
var bush1Image = new Image();
bush1Image.src = 'bush1.png';
var bush2Image = new Image();
bush2Image.src = 'bush2.png';
but you need to initialize bush1Image and bush2Image before calling generateBushes. Just moving var bushData = generateBushes(); to after bush2Image.src = 'bush2.png'; fixes it.

Compare multiple part of an image through canvas using resemble.js

I am trying to compare different blocks of an image(filled.png) with a specific block of another image(blank.png).
So far I have tried this :-
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = 20;
canvas.height = 20;
var img = new Image();
img.onload = function(){
context.drawImage(img,53,61,20,20,0,0,20,20);
};
img.src ='blank.png';
var imgResult = new Image();
var image1,image2;
var canvasResult = document.createElement('canvas');
canvasResult.width = 20;
canvasResult.height = 20;
var contextResult = canvasResult.getContext('2d');
function compare(){
image1=new Image();
image1.onload= function(){
imgResult.onload = function(){
var x = 53;
for (var i = 1; i <= 20; i++) {
contextResult.clearRect(0, 0, 20, 20);
contextResult.drawImage(imgResult,x,61,20,20,0,0,20,20);
x += 23;
image2 = new Image();
image2.onload = function(){
resemble(image1.src).compareTo(image2.src).onComplete(function(data){
$('p').append('Diffrence : ' + data.misMatchPercentage+ '%</br>');
});
};
image2.src = canvasResult.toDataURL();
}
};
imgResult.src = 'filled.png';
}
image1.src=canvas.toDataURL();
}
But it is not working, getting same result on each iteration of for loop. So please help me find, where I am going wrong.

.onComplete - sounds asynchronous, and image2.onload DEFINITELY IS - but in the meantime you're changing contextResult ... asynchronous code strikes again
If you create a function which recursively calls itself when each iteration completes, you should have better results:
e.g. with minimal code changes to what you have:
imgResult.onload = function(){
var x = 53, i = 1;
var compare = function() {
contextResult.clearRect(0, 0, 20, 20);
contextResult.drawImage(imgResult,x,61,20,20,0,0,20,20);
x += 23;
image2 = new Image();
image2.onload = function(){
resemble(image1.src).compareTo(image2.src).onComplete(function (data) {
$('p').append('Diffrence : ' + data.misMatchPercentage+ '%</br>');
i += 1;
if (i <= 20) {
compare();
}
});
};
image2.src = canvasResult.toDataURL();
};
compare();
}

Not getting data in kinetic js throught JSON

i am stuck in passing data from php to kineticjs throught json below is the code
$arrParams = array('images' =>$images, 'captions' => $content);
init({"container":"slider","data":<?php echo json_encode($arrParams); ?>});
i want to pass the above Json array in my below given coded kineticjs code
var data;
var canvasWidth;
var canvasHeight;
var stage;
var layer = new Kinetic.Layer();
var imageNodes = [];
var imageObjects = [];
var imageBox = [];
var captionBox = [];
var textNodes = [];
var totalObjects = 0;
var objectLoaded = 0;
var currentSlide = false;
var defaultPosition = [];
var rightCardPosition = [];
var leftCardPosition = [];
function init(config) {
canvasWidth = config.width | 600;
canvasHeight = config.height | 300;
defaultPosition["x"] = canvasWidth / 4;
defaultPosition["y"] = canvasHeight + 5;
leftCardPosition["start"] = [];
leftCardPosition["end"] = [];
leftCardPosition["start"]["x"] = (canvasWidth / 3) - 180;
leftCardPosition["start"]["y"] = canvasHeight - 260;
leftCardPosition["end"]["x"] = (canvasWidth + 100);
leftCardPosition["end"]["y"] = -250;
rightCardPosition["start"] = [];
rightCardPosition["end"] = [];
rightCardPosition["start"]["x"] = (canvasWidth / 3) + 160;
rightCardPosition["start"]["y"] = canvasHeight - 300;
rightCardPosition["end"]["x"] = (canvasWidth + 100);
rightCardPosition["end"]["y"] = -250;
stage = new Kinetic.Stage({
container: config.container,
width: canvasWidth,
height: canvasHeight
});
totalObjects = data.images.length;
for (var i = 0; i < data.images.length; i++) {
totalObjects += data.captions[i].length;
}
for (var i = 0; i < data.images.length; i++) {
loadImage(data.images[i]);
loadCaption(data.captions[i]);
}
}
I am getting error like in the line
totalObjects = data.images.length;
data is undefine... which means images is not pass from the json array

You're encoding the JSON with PHP, now you just need to parse it with JavaScript and store it in your data variable.
data = JSON.parse(config.data);
Put this at the start of your init function and it should work for you.

When dynamically creating images, why is the image array empty?

What I am trying to do is load images dynamically and then draw them on the screen. However, when I call console.log(images), it is empty.
Here is the code:
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
var images = new Array();
for (i = 0; i < mattes_array.length; i++)
{
var imgsrc = mattes_array[i]["imgsrc"];
var total_size = mattes_array[i]["total_size"];
var cpu = mattes_array[i]["cpu"];
var cid = mattes_array[i]["cid"];
var imageObj = new Image();
imageObj.onload = function() {
images[i] = imageObj;
console.log(images[i]);
};
imageObj.id = "matte_" + cid;
imageObj.src = imgsrc;
}
console.log(images); //this is empty
for (i = 0; i < mattes_array.length; i++)
{
var imgsrc = mattes_array[i]["imgsrc"];
var total_size = mattes_array[i]["total_size"];
var cpu = mattes_array[i]["cpu"];
var cid = mattes_array[i]["cid"];
var pattern = ctx.createPattern(images[i], 'repeat');
ctx.strokeStyle = pattern;
ctx.lineWidth = width - opening_width - (total_size * 2);
ctx.strokeRect(0, 0, width, height);
}
}
I have also tried doing it in one loop, but it seems to only draw the last image:
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
var images = new Array();
for (i = 0; i < mattes_array.length; i++)
{
var imgsrc = mattes_array[i]["imgsrc"];
var total_size = mattes_array[i]["total_size"];
var cpu = mattes_array[i]["cpu"];
var cid = mattes_array[i]["cid"];
var imageObj = new Image();
imageObj.onload = function() {
var pattern = ctx.createPattern(imageObj, 'repeat');
ctx.strokeStyle = pattern;
ctx.lineWidth = width - opening_width - (total_size * 2);
ctx.strokeRect(0, 0, width, height);
};
imageObj.id = "matte_" + cid;
imageObj.src = imgsrc;
}
}
Here is an image of what I am trying to do:

Images load asynchronously. You're trying to draw them before they are loaded. Give this a try:
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
var images = new Array();
var loaded = 0;
for (i = 0; i < mattes_array.length; i++)
{
var imgsrc = mattes_array[i]["imgsrc"];
var total_size = mattes_array[i]["total_size"];
var cpu = mattes_array[i]["cpu"];
var cid = mattes_array[i]["cid"];
var imageObj = new Image();
imageObj.onload = function() {
images[i] = imageObj;
console.log(images[i]);
if ( ++loaded === mattes_array.length ) onloaded();
};
imageObj.id = "matte_" + cid;
imageObj.src = imgsrc;
}
function onloaded() {
console.log(images); //this is won't be empty anymore
for (i = 0; i < mattes_array.length; i++)
{
var imgsrc = mattes_array[i]["imgsrc"];
var total_size = mattes_array[i]["total_size"];
var cpu = mattes_array[i]["cpu"];
var cid = mattes_array[i]["cid"];
var pattern = ctx.createPattern(images[i], 'repeat');
ctx.strokeStyle = pattern;
ctx.lineWidth = width - opening_width - (total_size * 2);
ctx.strokeRect(0, 0, width, height);
}
}
}