Author: John Au-Yeung

Sometimes, we want to resize HTML5 canvas to fit window with JavaScript.

In this article, we’ll look at how to resize HTML5 canvas to fit window with JavaScript.

How to resize HTML5 canvas to fit window with JavaScript?

To resize HTML5 canvas to fit window with JavaScript, we set the width and height properties.

For instance, we write

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

to select the canvas with querySelector.

Then we get its context with getContext.

Next, we set its width and height to the window width and height, which we get from the innerWidth and innerHeight properties.

Conclusion

To resize HTML5 canvas to fit window with JavaScript, we set the width and height properties.

Sometimes, we want to listen for changes in contenteditable elements with JavaScript.

In this article, we’ll look at how to listen for changes in contenteditable elements with JavaScript.

How to listen for changes in contenteditable elements with JavaScript?

To listen for changes in contenteditable elements with JavaScript, we listen for the input event.

For instance, we write

<div contenteditable="true" id="editor">Please type something in here</div>

to add a contenteditable div.

Then we write

document.getElementById("editor").addEventListener("input", () => {
  console.log("input event fired");
});

to select the div with getElementById.

And then we call addEventListener to listen to the input event on it.

When we change the div’s contents, then event handler is called.

Conclusion

To listen for changes in contenteditable elements with JavaScript, we listen for the input event.

Sometimes, we want to append text to a div with JavaScript.

In this article, we’ll look at how to append text to a div with JavaScript.

How to append text to a div with JavaScript?

To append text to a div with JavaScript, we append the text to the innerHTML string.

For instance, we write

const div = document.getElementById("divID");
div.innerHTML += "Extra stuff";

to select the div with getElementById.

Then we append the new text by concatenating it to the innerHTML string.

Conclusion

To append text to a div with JavaScript, we append the text to the innerHTML string.

Sometimes, we want to detect div dimension change with JavaScript./

In this article, we’ll look at how to detect div dimension change with JavaScript.

How to detect div dimension change with JavaScript?

To detect div dimension change with JavaScript, we use ResizeObserver.

For instance, we write

const outputSize = () => {
  console.log(textbox.offsetWidth, textbox.offsetHeight);
};
outputsize();

new ResizeObserver(outputSize).observe(textbox);

to create a ResizeObserver obbject with the outputSize function.

And we call observer with the textbox element to watch its size change.

We get the width and height with offsetWidth and offsetHeight.

Conclusion

To detect div dimension change with JavaScript, we use ResizeObserver.

Sometimes, we want to delete a localStorage item when the browser window/tab is closed with JavaScript.

In this article, we’ll look at how to delete a localStorage item when the browser window/tab is closed with JavaScript.

How to delete a localStorage item when the browser window/tab is closed with JavaScript?

To delete a localStorage item when the browser window/tab is closed with JavaScript, we call removeItem.

For instance, we write

window.onbeforeunload = () => {
  window.localStorage.removeItem("keyName");
};

to set window.onbeforeunload to a function that calls localStorage.removeItem with the key of the item to remove.

onbeforeunload is called before we close the tab or window.

Conclusion

To delete a localStorage item when the browser window/tab is closed with JavaScript, we call removeItem.