Loading Images onto the Canvas

The canvas element allows you to load and display images. This is essential for creating games, visualizations, and interactive applications. The core method for drawing images on the canvas is drawImage().

Example: Basic Image Loading

This example demonstrates loading and drawing a simple image on the canvas.

 <canvas id="basicCanvas" width="300" height="200"></canvas>

        <script>
          const canvas = document.getElementById('basicCanvas');
          const ctx = canvas.getContext('2d');

          const image = new Image();
          image.src = 'path/to/your/image.jpg'; // Replace with your image path

          image.onload = () => {
            ctx.drawImage(image, 0, 0); // Draw the image at (0, 0)
          };
        </script> 

Explanation:

• We create a new Image object.
• We set the src attribute to the path of the image.
• The onload event handler is crucial. It ensures the image is fully loaded before we attempt to draw it onto the canvas.
• ctx.drawImage(image, x, y) draws the image at the specified x and y coordinates.

Using Images as Sprites

Sprites are images used as building blocks in animations and games. Instead of drawing the entire image, you draw only a portion of it, which is useful for animation or only displaying what is necessary.

Example: Sprite Animation

This demonstrates drawing a part of an image as a sprite, commonly used for animations.

 <canvas id="spriteCanvas" width="400" height="200"></canvas>

        <script>
          const canvas = document.getElementById('spriteCanvas');
          const ctx = canvas.getContext('2d');

          const spriteImage = new Image();
          spriteImage.src = 'path/to/your/sprite-sheet.png'; // Replace with your sprite sheet path

          const spriteWidth = 50;  // Width of a single sprite frame
          const spriteHeight = 50; // Height of a single sprite frame
          let frameX = 0;       // X coordinate of the sprite frame on the sprite sheet
          let frameY = 0;       // Y coordinate of the sprite frame on the sprite sheet

          spriteImage.onload = () => {
            function animate() {
              ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
              ctx.drawImage(
                spriteImage,
                frameX * spriteWidth, // Source X (start X coordinate of the frame in the sprite sheet)
                frameY * spriteHeight, // Source Y (start Y coordinate of the frame in the sprite sheet)
                spriteWidth,           // Source Width
                spriteHeight,          // Source Height
                50,                   // Destination X (where to draw the sprite on the canvas)
                50,                   // Destination Y (where to draw the sprite on the canvas)
                spriteWidth,           // Destination Width (how wide to draw the sprite)
                spriteHeight            // Destination Height (how tall to draw the sprite)
              );

              frameX++; // Move to the next frame
              if (frameX > 3) frameX = 0;  // Loop back to the first frame

              requestAnimationFrame(animate); // Call animate again
            }

            animate(); // Start the animation
          };
        </script> 

Explanation:

• We load a sprite sheet image. A sprite sheet contains multiple frames of an animation within a single image.
• spriteWidth and spriteHeight define the dimensions of a single sprite frame within the sheet.
• frameX and frameY determine which frame to draw. We increment frameX to move across the sprite sheet horizontally.
• ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) is used for more complex image drawing:
  • sx, sy: The starting X and Y coordinates of the *source* image (sprite sheet) to be drawn.
  • sWidth, sHeight: The width and height of the portion of the *source* image (sprite sheet) to be drawn.
  • dx, dy: The X and Y coordinates on the *destination* canvas where the image should be drawn.
  • dWidth, dHeight: The width and height of the drawn image on the *destination* canvas. This allows scaling during drawing.
• requestAnimationFrame is used to create a smooth animation loop.

Manipulating Images: Scaling, Rotation, and Cropping

Canvas provides powerful tools for manipulating images, including scaling, rotating, and cropping. These manipulations are essential for creating visually appealing and interactive applications.

Scaling

Scaling images allows you to change their size when drawing them on the canvas. Use the dWidth and dHeight parameters of drawImage().

 <canvas id="scalingCanvas" width="400" height="200"></canvas>

        <script>
          const canvas = document.getElementById('scalingCanvas');
          const ctx = canvas.getContext('2d');

          const image = new Image();
          image.src = 'path/to/your/image.jpg'; // Replace with your image path

          image.onload = () => {
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height); // Scale to fit the canvas
          };
        </script> 

Explanation: We pass canvas.width and canvas.height as the destination width and height to scale the image to fill the canvas.

Rotation

You can rotate images using the rotate() method of the canvas context. Remember to translate the context origin to the image's center before rotating.

 <canvas id="rotationCanvas" width="200" height="200"></canvas>

        <script>
          const canvas = document.getElementById('rotationCanvas');
          const ctx = canvas.getContext('2d');

          const image = new Image();
          image.src = 'path/to/your/image.jpg'; // Replace with your image path

          image.onload = () => {
            ctx.translate(canvas.width / 2, canvas.height / 2); // Translate to the center
            ctx.rotate(Math.PI / 4); // Rotate by 45 degrees (PI/4 radians)
            ctx.drawImage(image, -image.width / 2, -image.height / 2); // Draw the image centered
            ctx.resetTransform(); // Reset transformations for subsequent drawings.  IMPORTANT!
          };
        </script> 

Explanation:

• ctx.translate(x, y) moves the origin of the canvas context.
• ctx.rotate(angle) rotates the canvas context by the specified angle (in radians).
• After rotating, we draw the image, offsetting it by half its width and height to center it around the translated origin.
• ctx.resetTransform() resets the transformation matrix to the identity matrix. This is *crucial* to prevent subsequent draws from being affected by the rotation.

Cropping

Cropping involves drawing only a portion of the image using the source parameters of drawImage().

 <canvas id="croppingCanvas" width="300" height="200"></canvas>

        <script>
          const canvas = document.getElementById('croppingCanvas');
          const ctx = canvas.getContext('2d');

          const image = new Image();
          image.src = 'path/to/your/image.jpg'; // Replace with your image path

          image.onload = () => {
            const cropX = 50;
            const cropY = 30;
            const cropWidth = 100;
            const cropHeight = 80;

            ctx.drawImage(
              image,
              cropX, cropY, cropWidth, cropHeight, // Source (Crop)
              0, 0, cropWidth, cropHeight          // Destination
            );
          };
        </script> 

Explanation: We specify the starting coordinates (cropX, cropY) and dimensions (cropWidth, cropHeight) of the portion of the source image that we want to draw.