Author: John Au-Yeung

Sometimes, we want to upload image into HTML5 canvas with JavaScript.

In this article, we’ll look at how to upload image into HTML5 canvas with JavaScript.

How to upload image into HTML5 canvas with JavaScript?

To upload image into HTML5 canvas with JavaScript, we can get the image from the file input and draw it in the canvas.

For instance, we write

<input type="file" id="inp" /> <canvas id="canvas"></canvas>

to add the file input and the canvas.

Then we write

const draw = (e) => {
  const canvas = document.getElementById("canvas");
  canvas.width = e.target.width;
  canvas.height = e.target.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(e.target, 0, 0);
};

document.getElementById("inp").onchange = (e) => {
  const img = new Image();
  img.onload = draw;
  img.src = URL.createObjectURL(e.target.files[0]);
};

to select the file input with getElementById.

And we set its onchange property to a function that runs when we select a file.

In it, we create an Image object and set img.onload to draw.

Then we set img.src to the base64 URL of the selected image file.

draw is called when the image is loaded.

In draw, we get the canvas with getElementById.

And we set the canvas dimensions to the image dimensions with

canvas.width = e.target.width;
canvas.height = e.target.height;

e.target is the img element.

Next, we get the canvas with getContext.

And we call drawImage to draw the image onto the canvas.

Sometimes, we want to combine members of multiple types in a TypeScript annotation.

In this article, we’ll look at how to combine members of multiple types in a TypeScript annotation.

How to combine members of multiple types in a TypeScript annotation?

To combine members of multiple types in a TypeScript annotation, we can create intersection types.

For instance, we write

interface ClientRequest {
  userId: number;
  sessionKey: string;
}

interface Coords {
  lat: number;
  long: number;
}

type Combined = ClientRequest & Coords;

to combine the properties of the ClientRequest and Coords into one type with ClientRequest & Coords.

Then Combined would have the properties of both interfaces in a single type.

Conclusion

To combine members of multiple types in a TypeScript annotation, we can create intersection types.

Sometimes, we want to loop through children objects in JavaScript.

In this article, we’ll look at how to loop through children objects in JavaScript.

How to loop through children objects in JavaScript?

To loop through children objects in JavaScript, we can use the spread operator and the forEach method.

For instance, we write

const listItems = document.querySelector("ul").children;
const listArray = [...listItems];
listArray.forEach((item) => {
  console.log(item);
});

to select all children from the ul with querySelector and children.

And then we convert the listItem node list to an array with the spread operator.

Then we call listArray.forEach with a callback to loop through each entry.

Conclusion

To loop through children objects in JavaScript, we can use the spread operator and the forEach method.

Sometimes, we want to get the first item from a map with JavaScript.

In this article, we’ll look at how to get the first item from a map with JavaScript.

How to get the first item from a map with JavaScript?

To get the first item from a map with JavaScript, we can use the next method.

For instance, we write

const m = new Map();
m.set("key1", {});
m.set("keyN", {});

console.log(m.entries().next().value);

to create the map m.

Then we get an iterator with the key and value with entries.

And we call next to get the first entry.

We get its key value pair from the value property.

Also, we can get an iterator with the keys with keys.

console.log(m.keys().next().value);

And, we can get an iterator with the values with values.

console.log(m.values().next().value);

Conclusion

To get the first item from a map with JavaScript, we can use the next method.

Sometimes, we want to find if element with specific ID exists or not with JavaScript.

In this article, we’ll look at how to find if element with specific ID exists or not with JavaScript.

How to find if element with specific ID exists or not with JavaScript?

To find if element with specific ID exists or not with JavaScript, we check if getElementById returns the element or null.

For instance, we write

const myEle = document.getElementById("myElement");
if (myEle) {
  const myEleValue = myEle.value;
}

to get the element with getElementById.

And then we get the value property of myEle if it’s not null.

Conclusion

To find if element with specific ID exists or not with JavaScript, we check if getElementById returns the element or null.