Author: John Au-Yeung

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

Categories
JavaScript Answers

How to Fill the Whole Canvas with a Specific Color in JavaScript?

white and brown long coated small dog

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

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

Fill the Whole Canvas with a Specific Color in JavaScript

To fill the whole canvas with a specific color in JavaScript, we can set the glovalCompositionOperation property of the canvas context to 'destination-cover' .

Then we can set the fillStyle to the color we want to fill the canvas with.

For instance, we can write:

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

to add the canvas.

Then we write:

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

We get the canvas with document.querySelector .

Then we get the context with getContext .

Then we set the glovalCompositionOperation property of the canvas context to 'destination-cover' to add the color behind other elements.

Next, we set fillStyle to 'blue' to make the canvas blue.

And then we call fillRect to add the fill color to the canvas.

Conclusion

To fill the whole canvas with a specific color in JavaScript, we can set the glovalCompositionOperation property of the canvas context to 'destination-cover' .

Then we can set the fillStyle to the color we want to fill the canvas with.

Categories
JavaScript Answers

How to Use querySelector with IDs that are Numbers in JavaScript?

white and brown long coated small dog lying on white textile

Sometimes, we want to use querySelector with IDs that are numbers in JavaScript.

In this article, we’ll look at how to use querySelector with IDs that are numbers in JavaScript.

Use querySelector with IDs that are Numbers in JavaScript

To use querySelector with IDs that are numbers in JavaScript, we have to escape the unicode code point representation of the number.

For instance, we can write:

<div id='1'>
  hello world
</div>

Then we write:

const el = document.querySelector('#\\31');
console.log(el)

to select the div with ID 1.

U+0031 is the Unicode code point of the character 1, so we pass in \31 , which is the escaped version of the Unicode code point representation of 1.

el should be the div with ID 1 as a result.

Conclusion

To use querySelector with IDs that are numbers in JavaScript, we have to escape the unicode code point representation of the number.

Categories
React Native Answers

How to add an image border shadow with React Native?

Labrador retriever puppy walking on green grass

To add an image border shadow with React Native, we add nested Vies with different background colors.

For instance, we write:

<View
  style={{
    flexGrow: 1,
    backgroundColor: Colors.white,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
  }}
>
  <View
    style={[
      Theme.center,
      Theme.dropShadow,
      {
        top: -100,
        width: 190,
        height: 190,
        borderRadius: 190 / 2,
        backgroundColor: Colors.white,
      },
    ]}
  >
    <Image
      source={require("../../assets/resto/chef_jude.png")}
      style={[
        {
          width: 180,
          height: 180,
          borderRadius: 180 / 2,
        },
      ]}
    />
  </View>
</View>;

to set thr backgroundColor properies of the Views.

We set the inner one to have different top position to produce the shadow effect.

Categories
React Answers

How to add iconify into a React project?

Labrador retriever puppy walking on green grass

How to add iconify into a React project?

We install it with

npm install --save-dev @iconify/react @iconify-icons/cib

Then we import the library by adding

import { Icon, InlineIcon } from '@iconify/react';
import bitcoinIcon from '@iconify-icons/cib/bitcoin';
Categories
React Answers

How to preload images with React and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to preload images with React and JavaScript.

In this article, we’ll look at how to preload images with React and JavaScript.

How to preload images with React and JavaScript?

To preload images with React and JavaScript, we can create our own hook.

import { useEffect } from "react";

export const usePreloadImages = (imageSrcs) => {
  useEffect(() => {
    const randomStr = Math.random().toString(32).slice(2) + Date.now();
    window.usePreloadImagesData = window.usePreloadImagesData ?? {};
    window.usePreloadImagesData[randomStr] = [];
    for (const src of imageSrcs) {
      const img = new Image();
      img.src = src;
      window.usePreloadImagesData[randomStr].push(img);
    }
    return () => {
      delete window.usePreloadImagesData?.[randomStr];
    };
  }, [imageSrcs]);
};

We add the useEffect hook to store the images in the window.usePreloadImagesData property array.

The we create Image instances and push them to the array.

Once, the component unmounts, we clear window.usePreloadImagesData with

delete window.usePreloadImagesData?.[randomStr];