Category: JavaScript Answers

Sometimes, we want to fill the whole canvas with specific color with JavaScript.

In this article, we’ll look at how to fill the whole canvas with specific color with JavaScript.

How to fill the whole canvas with specific color with JavaScript?

To fill the whole canvas with specific color with JavaScript, we can use the fillStyle and fillRect methods.

For instance, we write:

<canvas style='width: 300px; height: 300px'></canvas>

to add the canvas.

Then we write:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

to get the canvas with document.querySelector.

And we call canvas.getContext to get the canvas context.

Next, we set fillStyle to 'blue' to set the background color.

And finally, we call fillRect with 0, 0, canvas.width, and canvas.height to fill the whole canvas with the background color.

Conclusion

To fill the whole canvas with specific color with JavaScript, we can use the fillStyle and fillRect methods.

Sometimes, we want to Get the ID from URL with JavaScript.

In this article, we’ll look at how to Get the ID from URL with JavaScript.

Get the ID from URL with JavaScript

To Get the ID from URL with JavaScript, we can call the JavaScript string’s split method on the URL string.

Then we get the last part of it with the JavaScript array at method.

For instance, we write:

const url = "http://www.site.com/234234234"
const strs = url.split('/');
const id = strs.at(-1)
console.log(id)

We call split with '/' to split the url string by the /.

Then we call at with -1 to get the element from the strs array.

Therefore, id is 234234234 as we expect.

Conclusion

To Get the ID from URL with JavaScript, we can call the JavaScript string’s split method on the URL string.

Then we get the last part of it with the JavaScript array at method.

Sometimes, we want to delete a selected fabric.js object.

In this article, we’ll look at how to delete a selected fabric.js object.

How to delete a selected fabric.js object?

To delete a selected fabric.js object, we use the canvas.getActiveObjects() method to get all selected objects.

Then we call remove with each selected item as the arguments.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/460/fabric.min.js"></script>

<canvas style='width: 300px; height: 300px' id="canvas"></canvas>

<button id='add'>
  add
</button>

<button id='delete'>
  delete
</button>

to add the fabric.js script with the canvas and add and delete buttons.

Then we write:

const canvas = new fabric.Canvas('canvas');
const add = document.querySelector('#add')
const del = document.querySelector('#delete')

add.addEventListener('click', () => {
  const rect = new fabric.Rect({
    left: Math.floor(Math.random() * 300),
    top: Math.floor(Math.random() * 300),
    fill: 'red',
    width: 20,
    height: 20,
  });
  canvas.add(rect);

  const circle = new fabric.Circle({
    radius: 20,
    fill: 'green',
    left: Math.floor(Math.random() * 300),
    top: Math.floor(Math.random() * 300),
  });
  canvas.add(circle);
})

del.addEventListener('click', () => {
  canvas.getActiveObjects().forEach((obj) => {
    canvas.remove(obj)
  });
  canvas.discardActiveObject().renderAll()
})

We create the fabric.js canvas object with the fabric.Canvas constructor with the ID string.

Then we select the buttons with document.querySelector.

Then we call addEventListener on add to add a click listener to it.

In the event handler, we create a fabric rectangle and circle with the fabric.Rect and fabric.Circle constructors respectively.

We set the left and top to random values to randomly position the shapes.

Then we call del.addEventListener to add a click listener to it.

In the click listener, we get the selected objects with getActiveObjects.

Then we call forEach on it with a callback to remove each selected object.

To remove them we call canvas.remove with obj as the argument.

Then we call canvas.discardActiveObject().renderAll() to refresh the canvas.

Conclusion

To delete a selected fabric.js object, we use the canvas.getActiveObjects() method to get all selected objects.

Then we call remove with each selected item as the arguments.

Sometimes, we want to get next week start and end using moment.js.

In this article, we’ll look at how to get next week start and end using moment.js.

How to get next week start and end using moment.js?

To get next week start and end using moment.js, we can sue the add, startOf, and endOf methods.

For instance, we write:

const startNextWeek = moment().add(1, 'weeks').startOf('isoWeek')
const endNextWeek = moment().add(1, 'weeks').endOf('isoWeek')

console.log(startNextWeek)
console.log(endNextWeek)

to get the current date time with moment.

Then we call add with 1 and 'weeks' to add 1 week to the current date and time.

And then we call startOf and endOf with 'isoWeek' to get the start and end of next week respectively.

isoWeek starts Monday and ends Sunday.

Conclusion

To get next week start and end using moment.js, we can sue the add, startOf, and endOf methods.

Sometimes, we want to get the filename from the JavaScript FileReader.

In this article, we’ll look at how to get the filename from the JavaScript FileReader.

How to get the filename from the JavaScript FileReader?

To get the filename from the JavaScript FileReader, we can use the fileName property of the selected file.

For instance, we write:

<input type='file'>

to add a file input.

Then we write:

const reader = new FileReader();
reader.onload = (readerEvt) => {
  console.log(readerEvt.target);
};

const input = document.querySelector('input')
input.addEventListener('change', (e) => {
  const [file] = e.target.files
  console.log(file.name)
  reader.readAsDataURL(file)
})

to create the FileReader instance.

We select the input with document.querySelector.

Then we add a change event handler to the input with addEventListener.

In the event handler, we get the selected file with e.target.files.

Then we get the name of the selected file with file.name.

Conclusion

To get the filename from the JavaScript FileReader, we can use the fileName property of the selected file.