Author: John Au-Yeung

To fill the whole canvas with specific color with JavaScript, we set the fillStyle and call the fillRect method.

For instance, we write

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

to get the canvas with getElementById.

And then get its context with getContext.

Then we set the fill color by setting the fillStyle.

Finally we call fillRect to fill the canvas with the color by calling with 0, 0, canvas.width, and canvas.height.

To run JavaScript when an element loses focus, we set the onblur attribute to the JavaScript code we want to run.

For instance, we write

<input type="text" name="name" value="value" onblur="alert(1);" />

to set the onblur attribute to alert(1); to show an alert box when we move focus away from the input.

To detect that HTML5 canvas is supported with JavaScript, we can try to create a canvas element.

For instance, we write

const isCanvasSupported = () => {
  const elem = document.createElement("canvas");
  return !!elem?.getContext?.("2d");
};

to define the isCanvasSupported function.

In it, we create a canvas with createElement.

Then we try to get its context with elem?.getContext?.("2d").

If it’s defined, then canvas is suppored.

To check if a specific pixel of an image is transparent with JavaScript, we use the getImageData method.

For instance, we write

const img = document.getElementById("my-image");
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height);

const pixelData = canvas
  .getContext("2d")
  .getImageData(event.offsetX, event.offsetY, 1, 1).data;

to select the image with getElementById.

and then we create a canvas with createElement

Next, we call drawImage to draw the img element image into the canvas.

And we get the image data at the pixel at event.offsetX, event.offsetY with getImageData by calling it with 1 and 1.