Author: John Au-Yeung

To change the selected option of an HTML Select element with JavaScript, we set the value property.

For instance, we write

<select id="sel">
  <option value="1">Cat</option>
  <option value="2">Dog</option>
  <option value="3">Fish</option>
</select>

to add a select drop down.

Then we write

document.getElementById("sel").value = "1";

to select the drop down with getElementById.

And we set its value property to the string of the value attribute of the option element we want to select to select it.

To resize (downscale) high quality image with HTML5 canvas and JavaScript, we call the scale method.

For instance, we write

const setCanvasSize = (canvas, rate) => {
  const scaleRate = rate;
  canvas.width = window.innerWidth * scaleRate;
  canvas.height = window.innerHeight * scaleRate;
  canvas.style.width = window.innerWidth + "px";
  canvas.style.height = window.innerHeight + "px";
  canvas.getContext("2d").scale(scaleRate, scaleRate);
};

to set the canvas width and height with

canvas.width = window.innerWidth * scaleRate;
canvas.height = window.innerHeight * scaleRate;
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";

then we scale its content by the scaleRate horizontally and vertically with

canvas.getContext("2d").scale(scaleRate, scaleRate);

To capture key press (or keydown) event on DIV element with JavaScript, we listen for the keyup event.

For instance, we write

document.querySelector("#myDiv").addEventListener("keyup", (e) => {
  console.log(e.key);
});

to select the div with ID myDiv with querySelector.

And then we call addEventListener to listen for the keyup event.

We use a function that logs the key of that’s pressed as the event handler.

e.key is a string with the key’s value.

To save canvas as an image with canvas.toDataURL() and JavaScript, we set the URL returned by toDataURL as the window.location.href property’s value.

For instance, we write

const image = canvas
  .toDataURL("image/png")
  .replace("image/png", "image/octet-stream");
window.location.href = image;

to call toDataURL to return a base64 URL with the canvas content.

Then we call replace to replace 'image/png' with "image/octet-stream".

And then we set image as the value of window.location.href to save the image.

To get local href value from anchor (a) tag with JavaScript, we use the href property.

For instance, we write

const href = document.getElementById("aaa").href;

to select the link with ID aaa with getElementById.

And then we get its href attribute value with the href property.