Web-Dev-For-Beginners/translations/pa/6-space-game/2-drawing-to-canvas

ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 2: ਹੀਰੋ ਅਤੇ ਮੋਨਸਟਰਜ਼ ਨੂੰ ਕੈਨਵਸ 'ਤੇ ਡਰਾਅ ਕਰੋ

ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼

ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼

ਕੈਨਵਸ

ਕੈਨਵਸ ਇੱਕ HTML ਐਲੀਮੈਂਟ ਹੈ ਜਿਸ ਵਿੱਚ ਮੂਲ ਰੂਪ ਵਿੱਚ ਕੋਈ ਸਮੱਗਰੀ ਨਹੀਂ ਹੁੰਦੀ; ਇਹ ਇੱਕ ਖਾਲੀ ਸਲੇਟ ਹੈ। ਤੁਹਾਨੂੰ ਇਸ 'ਤੇ ਡਰਾਅ ਕਰਕੇ ਕੁਝ ਜੋੜਨਾ ਪਵੇਗਾ।

✅ ਕੈਨਵਸ API ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ MDN 'ਤੇ।

ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਪੇਜ ਦੇ ਬਾਡੀ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਐਲਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

<canvas id="myCanvas" width="200" height="100"></canvas>

ਉਪਰਲੇ ਕੋਡ ਵਿੱਚ ਅਸੀਂ id, width ਅਤੇ height ਸੈਟ ਕਰ ਰਹੇ ਹਾਂ।

• id: ਇਸ ਨੂੰ ਸੈਟ ਕਰੋ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਲਈ ਰਿਫਰੈਂਸ ਪ੍ਰਾਪਤ ਕਰ ਸਕੋ।
• width: ਇਹ ਐਲੀਮੈਂਟ ਦੀ ਚੌੜਾਈ ਹੈ।
• height: ਇਹ ਐਲੀਮੈਂਟ ਦੀ ਉਚਾਈ ਹੈ।

ਸਧਾਰਨ ਜਾਮਿਤੀ ਡਰਾਅ ਕਰਨਾ

ਕੈਨਵਸ ਚੀਜ਼ਾਂ ਡਰਾਅ ਕਰਨ ਲਈ ਕਾਰਟੀਸੀਅਨ ਕੋਆਰਡੀਨੇਟ ਸਿਸਟਮ ਦੀ ਵਰਤੋਂ ਕਰ ਰਿਹਾ ਹੈ। ਇਸ ਲਈ ਇਹ x-ਅਕਸ ਅਤੇ y-ਅਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਇਹ ਦਰਸਾਉਣ ਲਈ ਕਿ ਕੁਝ ਕਿੱਥੇ ਸਥਿਤ ਹੈ। ਸਥਾਨ 0,0 ਸਿਖਰ ਦਾ ਖੱਬਾ ਸਥਾਨ ਹੈ ਅਤੇ ਹੇਠਾਂ ਦਾ ਸੱਜਾ ਸਥਾਨ ਉਹ ਹੈ ਜੋ ਤੁਸੀਂ ਕੈਨਵਸ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵਜੋਂ ਸੈਟ ਕੀਤਾ ਹੈ।

ਚਿੱਤਰ MDN ਤੋਂ

ਕੈਨਵਸ ਐਲੀਮੈਂਟ 'ਤੇ ਡਰਾਅ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨੀ ਪਵੇਗੀ:

1. ਰਿਫਰੈਂਸ ਪ੍ਰਾਪਤ ਕਰੋ ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਲਈ।
2. ਰਿਫਰੈਂਸ ਪ੍ਰਾਪਤ ਕਰੋ ਕੈਨਵਸ ਐਲੀਮੈਂਟ 'ਤੇ ਬੈਠੇ ਕੌਂਟੈਕਸਟ ਐਲੀਮੈਂਟ ਲਈ।
3. ਡਰਾਅ ਕਰਨ ਦੀ ਕਾਰਵਾਈ ਕਰੋ ਕੌਂਟੈਕਸਟ ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ।

ਉਪਰਲੇ ਕਦਮਾਂ ਲਈ ਕੋਡ ਆਮ ਤੌਰ 'ਤੇ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਦਾ ਹੈ:

// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height

✅ ਕੈਨਵਸ API ਮੁੱਖ ਤੌਰ 'ਤੇ 2D ਸ਼ੇਪ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ, ਪਰ ਤੁਸੀਂ 3D ਐਲੀਮੈਂਟ ਵੀ ਵੈਬਸਾਈਟ 'ਤੇ ਡਰਾਅ ਕਰ ਸਕਦੇ ਹੋ; ਇਸ ਲਈ ਤੁਸੀਂ WebGL API ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।

ਤੁਸੀਂ ਕੈਨਵਸ API ਨਾਲ ਕਈ ਤਰ੍ਹਾਂ ਦੀਆਂ ਚੀਜ਼ਾਂ ਡਰਾਅ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ:

• ਜਾਮਿਤੀ ਸ਼ੇਪ, ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਦਿਖਾਇਆ ਹੈ ਕਿ ਕਿਵੇਂ ਇੱਕ ਆਯਤ ਡਰਾਅ ਕਰਨਾ ਹੈ, ਪਰ ਤੁਸੀਂ ਹੋਰ ਵੀ ਬਹੁਤ ਕੁਝ ਡਰਾਅ ਕਰ ਸਕਦੇ ਹੋ।
• ਟੈਕਸਟ, ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਫੋਂਟ ਅਤੇ ਰੰਗ ਨਾਲ ਟੈਕਸਟ ਡਰਾਅ ਕਰ ਸਕਦੇ ਹੋ।
• ਚਿੱਤਰ, ਤੁਸੀਂ ਇੱਕ ਚਿੱਤਰ ਡਰਾਅ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਕਿ .jpg ਜਾਂ .png ਵਰਗੇ ਚਿੱਤਰ ਐਸੈਟ 'ਤੇ ਅਧਾਰਿਤ ਹੋਵੇ।

✅ ਅਜਮਾਓ! ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਕਿਵੇਂ ਇੱਕ ਆਯਤ ਡਰਾਅ ਕਰਨਾ ਹੈ, ਕੀ ਤੁਸੀਂ ਪੇਜ 'ਤੇ ਇੱਕ ਗੋਲ ਡਰਾਅ ਕਰ ਸਕਦੇ ਹੋ? CodePen 'ਤੇ ਕੁਝ ਦਿਲਚਸਪ ਕੈਨਵਸ ਡਰਾਇੰਗਾਂ ਦੇਖੋ। ਇਹ ਰਿਹਾ ਇੱਕ ਖਾਸ ਤੌਰ 'ਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਉਦਾਹਰਨ।

ਚਿੱਤਰ ਐਸੈਟ ਲੋਡ ਅਤੇ ਡਰਾਅ ਕਰੋ

ਤੁਸੀਂ ਇੱਕ ਚਿੱਤਰ ਐਸੈਟ ਨੂੰ Image ਆਬਜੈਕਟ ਬਣਾਕੇ ਅਤੇ ਇਸ ਦੀ src ਪ੍ਰਾਪਰਟੀ ਸੈਟ ਕਰਕੇ ਲੋਡ ਕਰਦੇ ਹੋ। ਫਿਰ ਤੁਸੀਂ load ਇਵੈਂਟ ਨੂੰ ਸੁਣਦੇ ਹੋ ਤਾਂ ਜੋ ਪਤਾ ਲੱਗੇ ਕਿ ਇਹ ਵਰਤਣ ਲਈ ਤਿਆਰ ਹੈ। ਕੋਡ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਦਾ ਹੈ:

ਐਸੈਟ ਲੋਡ ਕਰੋ

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // image loaded and ready to be used
}

ਐਸੈਟ ਲੋਡ ਪੈਟਰਨ

ਉਪਰਲੇ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਬਣਤਰ ਵਿੱਚ ਲਪੇਟਣ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਜੋ ਇਹ ਵਰਤਣ ਲਈ ਆਸਾਨ ਹੋਵੇ ਅਤੇ ਤੁਸੀਂ ਇਸ ਨੂੰ ਸਿਰਫ਼ ਉਸ ਸਮੇਂ ਮੈਨਿਪੁਲੇਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਜਦੋਂ ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋ ਜਾਵੇ:

function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}

ਗੇਮ ਐਸੈਟ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਡਰਾਅ ਕਰਨ ਲਈ, ਤੁਹਾਡਾ ਕੋਡ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖੇਗਾ:

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')

  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
  ctx.drawImage(monsterImg, 0,0);
}

ਹੁਣ ਤੁਹਾਡੀ ਗੇਮ ਬਣਾਉਣ ਦਾ ਸਮਾਂ ਹੈ

ਕੀ ਬਣਾਉਣਾ ਹੈ

ਤੁਸੀਂ ਇੱਕ ਵੈਬ ਪੇਜ ਬਣਾਉਗੇ ਜਿਸ ਵਿੱਚ ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਹੋਵੇਗਾ। ਇਹ ਇੱਕ ਕਾਲੇ ਸਕ੍ਰੀਨ 1024*768 ਨੂੰ ਰੈਂਡਰ ਕਰੇਗਾ। ਅਸੀਂ ਤੁਹਾਨੂੰ ਦੋ ਚਿੱਤਰ ਦਿੱਤੇ ਹਨ:

• ਹੀਰੋ ਜਹਾਜ਼

  

• 5*5 ਮੋਨਸਟਰ

  

ਵਿਕਾਸ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸਿਫਾਰਸ਼ ਕੀਤੇ ਕਦਮ

ਉਹ ਫਾਈਲਾਂ ਲੱਭੋ ਜੋ ਤੁਹਾਡੇ ਲਈ your-work ਸਬ ਫੋਲਡਰ ਵਿੱਚ ਬਣਾਈ ਗਈਆਂ ਹਨ। ਇਸ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਹੋਣ ਚਾਹੀਦੇ ਹਨ:

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

Visual Studio Code ਵਿੱਚ ਇਸ ਫੋਲਡਰ ਦੀ ਕਾਪੀ ਖੋਲ੍ਹੋ। ਤੁਹਾਨੂੰ ਇੱਕ ਸਥਾਨਕ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਸੈਟਅੱਪ ਕਰਨ ਦੀ ਲੋੜ ਹੈ, ਵਧੀਆ Visual Studio Code ਦੇ ਨਾਲ NPM ਅਤੇ Node ਇੰਸਟਾਲ ਕੀਤਾ ਹੋਵੇ। ਜੇ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ 'ਤੇ npm ਸੈਟਅੱਪ ਨਹੀਂ ਹੈ, ਇਸ ਨੂੰ ਕਿਵੇਂ ਸੈਟਅੱਪ ਕਰਨਾ ਹੈ।

ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ your_work ਫੋਲਡਰ 'ਤੇ ਜਾ ਕੇ ਸ਼ੁਰੂ ਕਰੋ:

cd your-work
npm start

ਉਪਰਲੇ ਕੋਡ HTTP ਸਰਵਰ ਨੂੰ ਪਤਾ http://localhost:5000 'ਤੇ ਸ਼ੁਰੂ ਕਰੇਗਾ। ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹੋ ਅਤੇ ਉਸ ਪਤੇ ਨੂੰ ਇਨਪੁਟ ਕਰੋ। ਇਹ ਹੁਣੇ ਲਈ ਇੱਕ ਖਾਲੀ ਪੇਜ ਹੈ, ਪਰ ਇਹ ਬਦਲ ਜਾਵੇਗਾ।

ਨੋਟ: ਆਪਣੀ ਸਕ੍ਰੀਨ 'ਤੇ ਬਦਲਾਵਾਂ ਦੇਖਣ ਲਈ, ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰੋ।

ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ

your-work/app.js ਵਿੱਚ ਲੋੜੀਂਦਾ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ ਹੇਠਾਂ ਦਿੱਤੇ ਹੱਲ ਲਈ

1. ਡਰਾਅ ਕਰੋ ਕਾਲੇ ਬੈਕਗ੍ਰਾਊਂਡ ਵਾਲਾ ਕੈਨਵਸ

   ਟਿਪ: /app.js ਵਿੱਚ ਸਹੀ TODO ਦੇ ਹੇਠਾਂ ਦੋ ਲਾਈਨਾਂ ਸ਼ਾਮਲ ਕਰੋ, ctx ਐਲੀਮੈਂਟ ਨੂੰ ਕਾਲਾ ਸੈਟ ਕਰੋ ਅਤੇ ਸਿਖਰ/ਖੱਬੇ ਕੋਆਰਡੀਨੇਟ ਨੂੰ 0,0 'ਤੇ ਸੈਟ ਕਰੋ ਅਤੇ ਕੈਨਵਸ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਦੇ ਬਰਾਬਰ ਸੈਟ ਕਰੋ।

2. ਟੈਕਸਟਚਰ ਲੋਡ ਕਰੋ

   ਟਿਪ: ਖਿਡਾਰੀ ਅਤੇ ਦੁਸ਼ਮਨ ਚਿੱਤਰਾਂ ਨੂੰ await loadTexture ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਤੇ ਚਿੱਤਰ ਪਾਥ ਪਾਸ ਕਰਕੇ ਸ਼ਾਮਲ ਕਰੋ। ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਅਜੇ ਨਹੀਂ ਦੇਖੋਗੇ!

3. ਹੀਰੋ ਨੂੰ ਡਰਾਅ ਕਰੋ ਸਕ੍ਰੀਨ ਦੇ ਕੇਂਦਰ ਵਿੱਚ ਹੇਠਲੇ ਹਿੱਸੇ ਵਿੱਚ

   ਟਿਪ: drawImage API ਦੀ ਵਰਤੋਂ ਕਰਕੇ heroImg ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਡਰਾਅ ਕਰੋ, canvas.width / 2 - 45 ਅਤੇ canvas.height - canvas.height / 4) ਸੈਟ ਕਰਕੇ।

4. 5*5 ਮੋਨਸਟਰਜ਼ ਡਰਾਅ ਕਰੋ

   ਟਿਪ: ਹੁਣ ਤੁਸੀਂ ਸਕ੍ਰੀਨ 'ਤੇ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਡਰਾਅ ਕਰਨ ਲਈ ਕੋਡ ਨੂੰ ਅਨਕਮੈਂਟ ਕਰ ਸਕਦੇ ਹੋ। ਅਗਲੇ, createEnemies ਫੰਕਸ਼ਨ 'ਤੇ ਜਾਓ ਅਤੇ ਇਸ ਨੂੰ ਬਣਾਓ।

   ਪਹਿਲਾਂ, ਕੁਝ ਕਾਂਸਟੈਂਟਸ ਸੈਟ ਕਰੋ:

   const MONSTER_TOTAL = 5;
   const MONSTER_WIDTH = MONSTER_TOTAL * 98;
   const START_X = (canvas.width - MONSTER_WIDTH) / 2;
   const STOP_X = START_X + MONSTER_WIDTH;
   

   ਫਿਰ, ਮੋਨਸਟਰਜ਼ ਦੀ ਐਰੇ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਡਰਾਅ ਕਰਨ ਲਈ ਇੱਕ ਲੂਪ ਬਣਾਓ:

   for (let x = START_X; x < STOP_X; x += 98) {
       for (let y = 0; y < 50 * 5; y += 50) {
         ctx.drawImage(enemyImg, x, y);
       }
     }
   

ਨਤੀਜਾ

ਤਿਆਰ ਨਤੀਜਾ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਣਾ ਚਾਹੀਦਾ ਹੈ:

ਹੱਲ

ਕਿਰਪਾ ਕਰਕੇ ਪਹਿਲਾਂ ਇਸ ਨੂੰ ਖੁਦ ਹੱਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਪਰ ਜੇ ਤੁਸੀਂ ਫਸ ਜਾਓ, ਤਾਂ ਇਸ ਹੱਲ ਨੂੰ ਦੇਖੋ।

---

GitHub Copilot Agent ਚੈਲੈਂਜ 🚀

Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:

ਵੇਰਵਾ: ਕੈਨਵਸ API ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਸਪੇਸ ਗੇਮ ਕੈਨਵਸ ਨੂੰ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵ ਅਤੇ ਇੰਟਰੈਕਟਿਵ ਤੱਤਾਂ ਨਾਲ ਵਧਾਓ।

ਪ੍ਰੋੰਪਟ: ਇੱਕ ਨਵੀਂ ਫਾਈਲ enhanced-canvas.html ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਇੱਕ ਕੈਨਵਸ ਹੋਵੇ ਜੋ ਪਿਛੋਕੜ ਵਿੱਚ ਐਨੀਮੇਟਡ ਸਟਾਰਜ਼ ਦਿਖਾਏ, ਹੀਰੋ ਜਹਾਜ਼ ਲਈ ਇੱਕ ਪਲਸਿੰਗ ਹੈਲਥ ਬਾਰ ਹੋਵੇ, ਅਤੇ ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਹੌਲੀ ਹੌਲੀ ਹੇਠਾਂ ਵੱਲ ਚੱਲਣ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਰੈਂਡਮ ਸਥਾਨਾਂ ਅਤੇ ਅਪਾਰਦਰਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਚਮਕਦੇ ਸਟਾਰਜ਼ ਡਰਾਅ ਕਰਦਾ ਹੈ, ਹੈਲਥ ਲੈਵਲ ਦੇ ਅਧਾਰ 'ਤੇ ਰੰਗ ਬਦਲਣ ਵਾਲੀ ਹੈਲਥ ਬਾਰ (ਹਰਾ > ਪੀਲਾ > ਲਾਲ) ਲਾਗੂ ਕਰਦਾ ਹੈ, ਅਤੇ ਦੁਸ਼ਮਨ ਜਹਾਜ਼ਾਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਗਤੀ 'ਤੇ ਸਕ੍ਰੀਨ ਦੇ ਹੇਠਾਂ ਵੱਲ ਐਨੀਮੇਟ ਕਰਦਾ ਹੈ।

🚀 ਚੈਲੈਂਜ

ਤੁਸੀਂ 2D-ਕੇਂਦਰਿਤ ਕੈਨਵਸ API ਨਾਲ ਡਰਾਅ ਕਰਨ ਬਾਰੇ ਸਿੱਖਿਆ ਪ੍ਰਾਪਤ ਕੀਤੀ ਹੈ; WebGL API 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੋ, ਅਤੇ 3D ਆਬਜੈਕਟ ਡਰਾਅ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।

ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼

ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼

ਸਮੀਖਾ ਅਤੇ ਸਵੈ ਅਧਿਐਨ

ਕੈਨਵਸ API ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰੋ ਇਸ ਬਾਰੇ ਪੜ੍ਹ ਕੇ।

ਅਸਾਈਨਮੈਂਟ

ਕੈਨਵਸ API ਨਾਲ ਖੇਡੋ

---

ਅਸਵੀਕਰਤਾ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।