Category: JavaScript

Sometimes, we want to draw a line over an image background with HTML5 canvas and JavaScript.

In this article, we’ll look at how to draw a line over an image background with HTML5 canvas and JavaScript.

How to draw a line over an image background with HTML5 canvas and JavaScript?

To draw a line over an image background with HTML5 canvas and JavaScript, we can call some canvas methods.

For instance, we write:

<canvas width='200' height='300'></canvas>

to add a canvas.

Then we write:

const canvas = document.querySelector("canvas")
const context = canvas.getContext("2d")
const image = new Image()
image.onload = () => {
  context.drawImage(image, 100, 20, 500, 500);
  context.beginPath();
  context.moveTo(188, 130);
  context.bezierCurveTo(140, 10, 388, 10, 388, 170);
  context.strokeStyle = "black";
  context.stroke();
}
image.src = 'https://picsum.photos/200/300'

to select the canvas with querySelector.

Then we create an img element with Image.

We set image.onload to a function that draws image onto the canvas with drawImage.

Then we use beginPath to start drawing.

moveTo moves to the location we want to draw.

besizeCurveTo draws a bezier curve. The first 4 arguments are the x and y coordinates of the first 2 control points.

And the last 2 arguments are the x and y coordinates of the end point.

strokeStyle sets the stroke.

And stroke draws the line.

Conclusion

To draw a line over an image background with HTML5 canvas and JavaScript, we can call some canvas methods.

Sometimes, we want to edit pixels and remove white background in a canvas image in HTML and JavaScript.

In this article, we’ll look at how to edit pixels and remove white background in a canvas image in HTML and JavaScript.

How to edit pixels and remove white background in a canvas image in HTML and JavaScript?

To edit pixels and remove white background in a canvas image in HTML and JavaScript, we can loop through the canvas pixels and change their color.

For instance, we write:

<canvas width='200' height='300'></canvas>

to add a canvas.

Then we write

const canvas = document.querySelector("canvas")
const ctx = canvas.getContext("2d")
const image = new Image()
image.onload = () => {
  canvas.height = canvas.width = 135;
  ctx.drawImage(image, 0, 0);
  const imgd = ctx.getImageData(0, 0, 135, 135),
    pix = imgd.data,
    newColor = {
      r: 0,
      g: 0,
      b: 0,
      a: 0
    };

  for (let i = 0, n = pix.length; i < n; i += 4) {
    const r = pix[i],
      g = pix[i + 1],
      b = pix[i + 2];
    if (r === 255 && g === 255 && b == 255) {
      pix[i] = newColor.r;
      pix[i + 1] = newColor.g;
      pix[i + 2] = newColor.b;
      pix[i + 3] = newColor.a;
    }
  }
  ctx.putImageData(imgd, 0, 0);
}
image.src = 'https://picsum.photos/200/300'

to select the canvas with querySelector.

In the image.onload method, we loop through the canvas image data we got from getImageData.

And we check for white with r === 255 && g === 255 && b == 255.

If that’s true, then we set the pixels to new rgba values.

We then call putImageData to draw the new pixels.

image.onload runs after image.src is set.

Conclusion

To edit pixels and remove white background in a canvas image in HTML and JavaScript, we can loop through the canvas pixels and change their color.

Sometimes, we want to get only first class of an HTML element with JavaScript.

In this article, we’ll look at how to get only first class of an HTML element with JavaScript.

How to get only first class of an HTML element with JavaScript?

To get only first class of an HTML element with JavaScript, we can use the classList property.

For instance, we write:

<div class='foo bar baz'>

</div>

to add a div with multiple classes.

Then we write:

const div = document.querySelector('div')
const [firstClass] = div.classList
console.log(firstClass)

to select the div with querySelector.

And then we get the first class from div.classList with destructuring.

Therefore firstClass is 'foo'.

Conclusion

To get only first class of an HTML element with JavaScript, we can use the classList property.

Sometimes, we want to deserialize query string into a JSON object with JavaScript

In this article, we’ll look at how to deserialize query string into a JSON object with JavaScript.

How to deserialize query string into a JSON object with JavaScript?

To deserialize query string into a JSON object with JavaScript, we can use the URLSearchParams constructor.

For instance, we write:

const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
const obj = Object.fromEntries([...params])
console.log(obj)

to create a new URL instance with the URL string.

Then we create the URLSearchParams instance with the url.search property which has the query string.

Next, we spread params into an array of key-value pair arrays.

Finally, we use Object.fromEntries to convert the array into an object.

Therefore, obj is

{
  bar: "2",
  foo: "1"
}

Conclusion

To deserialize query string into a JSON object with JavaScript, we can use the URLSearchParams constructor.

Sometimes, we want to compare times using moment.js and JavaScript.

In this article, we’ll look at how to compare times using moment.js and JavaScript.

How to compare times using moment.js and JavaScript?

To compare times using moment.js and JavaScript, we can compare the moment objects.

For instance, we write:

const past = moment().subtract("days", 1)
const now = moment()
console.log(past < now)

to create 2 moment date objects, past and now.

Then we can compare them directly with the usual JavaScript comparison operators.

The objects will automatically be converted to timestamps before comparison.

Therefore, the console log should log true.

Conclusion

To compare times using moment.js and JavaScript, we can compare the moment objects.