Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to add different fillStyle colors for arc in canvas with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to add different fillStyle colors for arc in canvas with JavaScript.

In this article, we’ll look at how to add different fillStyle colors for arc in canvas with JavaScript.

How to add different fillStyle colors for arc in canvas with JavaScript?

To add different fillStyle colors for arc in canvas with JavaScript, we can draw 2 different arcs.

For instance, we write:

<canvas width='400' height='400'></canvas>

to add a canvas element.

Then we write:

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(15, 15, 15, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "green";
ctx.beginPath();
ctx.arc(100, 15, 15, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

We select the canvas with querySelector.

Then we call getContext to get the context.

Next, we set the fillStyle for the arc.

Then we call arc with the coordinates of the top left corner, radius, start and end angle, and whether we want to draw counterclockwise respectively.

We call closePath and fill to draw and fill the arc respectively.

Likewise, we draw the 2nd arc the same way but with different fillStyle.

Now we see a red and green circle drawn.

Conclusion

To add different fillStyle colors for arc in canvas with JavaScript, we can draw 2 different arcs.

Categories
JavaScript Answers

How to remove last segment from URL with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to remove last segment from URL with JavaScript.

In this article, we’ll look at how to remove last segment from URL with JavaScript.

How to remove last segment from URL with JavaScript?

To remove last segment from URL with JavaScript, we can use the string’s slice method.

For instance, we write:

const url = 'http://example.com/foo/bar'
const newUrl = url.slice(0, url.lastIndexOf('/'));
console.log(newUrl)

We call url.slice with the indexes of the start and end of the substring we want to return.

The character at the end index itself is excluded.

We have url.lastIndexOf('/') to return the index of the last / in the URL string.

Therefore, newUrl is 'http://example.com/foo'.

Conclusion

To remove last segment from URL with JavaScript, we can use the string’s slice method.

Categories
JavaScript Answers

How to append a param onto the current URL with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to append a param onto the current URL with JavaScript.

In this article, we’ll look at how to append a param onto the current URL with JavaScript.

How to append a param onto the current URL with JavaScript?

To append a param onto the current URL with JavaScript, we can create a new URL instance from the URL string.

Then we can call the searchParams.append method on the URL instance to append a new URL parameter into it.

For instance, we write:

const url = new URL("http://foo.bar/?x=1&y=2");
url.searchParams.append('z', 42);
const newUrl = url.toString();
console.log(newUrl)

to create a new URL instance with "http://foo.bar/?x=1&y=2".

Then we call url.searchParams.append with the URL param key and value respectively.

And then we call toString to return the new URL string.

Therefore, newUrl is 'http://foo.bar/?x=1&y=2&z=42'.

Conclusion

To append a param onto the current URL with JavaScript, we can create a new URL instance from the URL string.

Then we can call the searchParams.append method on the URL instance to append a new URL parameter into it.

Categories
JavaScript Answers

How to read the html element lang attribute value with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to read the html element lang attribute value with JavaScript.

In this article, we’ll look at how to read the html element lang attribute value with JavaScript.

How to read the html element lang attribute value with JavaScript?

To read the html element lang attribute value with JavaScript, we can use the getElementsByTagName and getAttribute methods.

For instance, if we have:

<html lang='en'>

</html>

then we write:

const [html] = document.getElementsByTagName("html")
const lang = html.getAttribute("lang");
console.log(lang)

to call getElementsByTagName to get the html element object.

Then we call html.getAttribute with 'lang' to get the lang attribute value of the html element.

Therefore, lang is 'en'.

Conclusion

To read the html element lang attribute value with JavaScript, we can use the getElementsByTagName and getAttribute methods.

Categories
JavaScript Answers

How to recursively remove null values from JavaScript object?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to recursively remove null values from JavaScript object.

In this article, we’ll look at how to recursively remove null values from JavaScript object.

How to recursively remove null values from JavaScript object?

To recursively remove null values from JavaScript object, we can traverse all the properties of all nested objects and entries of all arrays and remove all null values.

For instance, we write:

const obj = {
  "store": {
    "book": [
      null,
      {
        "category": "fiction",
        "author": "Evelyn Waugh",
        "title": "Sword of Honour",
        "price": 12.99
      },
      null,
      {
        "category": "fiction",
        "author": "J. R. R. Tolkien",
        "title": "The Lord of the Rings",
      }
    ],
    "bicycle": {
      "color": "red",
      "price": null
    }
  }
}


const removeNulls = (obj) => {
  const isArray = Array.isArray(obj);
  for (const k of Object.keys(obj)) {
    if (obj[k] === null) {
      if (isArray) {
        obj.splice(k, 1)
      } else {
        delete obj[k];
      }
    } else if (typeof obj[k] === "object") {
      removeNulls(obj[k]);
    }
    if (isArray && obj.length === k) {
      removeNulls(obj);
    }
  }
  return obj;
}

const newObj = removeNulls(obj)
console.log(newObj)

We have the obj object with some null values.

Then we define the removeNulls function that takes the obj object.

We check if obj is an array.

And we loop through the keys with the for-of loop.

If obj[k] is null and obj is an array, we call splice to remove the entry.

Otherwise, we use the delete operator to remove the entry.

If obj[k] is an object, then we call removeNulls to traverse one level deeper into the object and do the same operations.

And if obj[k] is an array and obj.length is k, then we call removeNulls with obj to remove null entries.

As a result, newObj is:

{
  "store": {
    "book": [
      {
        "category": "fiction",
        "author": "Evelyn Waugh",
        "title": "Sword of Honour",
        "price": 12.99
      },
      {
        "category": "fiction",
        "author": "J. R. R. Tolkien",
        "title": "The Lord of the Rings"
      }
    ],
    "bicycle": {
      "color": "red"
    }
  }
}

Conclusion

To recursively remove null values from JavaScript object, we can traverse all the properties of all nested objects and entries of all arrays and remove all null values.