HTML 5 Canvas JavaScript nine slice

Nine slice is a great concept for reusable images for buttons and modal creation.

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
</head>
<body>
  <script>
    const canvas = document.createElement("canvas")
    canvas.width = 1000
    canvas.height = 1000
    const ctx = canvas.getContext("2d")
    document.body.appendChild(canvas)
    const img = new Image()
    img.src = "./a.png"
    img.onload = () => {
      // calculate the size of a slice
      // always use a square image as small as possible
      const s = img.width / 3

      // define the 9 parts as [x, y, w, h]
      const part1 = [0, 0, s, s]
      const part2 = [s, 0, s, s]
      const part3 = [s * 2, 0, s, s]
      const part4 = [0, s, s, s]
      const part5 = [s, s, s, s]
      const part6 = [s * 2, s, s, s]
      const part7 = [0, s * 2, s, s]
      const part8 = [s, s * 2, s, s]
      const part9 = [s * 2, s * 2, s, s]

      // target width/height (try different values!)
      const width = 16 * 24
      const height = 16 * 16

      // draw the corners
      ctx.drawImage(img, ...part1, 0, 0, s, s) // top left
      ctx.drawImage(img, ...part3, width - s, 0, s, s) // top right
      ctx.drawImage(img, ...part7, 0, height - s, s, s) // bottom left
      ctx.drawImage(img, ...part9, width - s, height - s, s, s) // bottom right

      // draw the edges
      ctx.drawImage(img, ...part2, s, 0, width - 2 * s, s) // top
      ctx.drawImage(img, ...part8, s, height - s, width - 2 * s, s) // bottom
      ctx.drawImage(img, ...part4, 0, s, s, height - 2 * s) // left
      ctx.drawImage(img, ...part6, width - s, s, s, height - 2 * s) // right

      // draw the center
      ctx.drawImage(img, ...part5, s, s, width - 2 * s, height - 2 * s)
    }
  </script>
</body>
</html>

Always use a square image or 48×48 pixel with rounded corners from 3 to 15 pixel.

The term “nine-slice” typically refers to a technique used in computer graphics and user interface design, especially in the context of 2D graphical elements or images that need to be resized without distorting their borders or corners. This technique is often used in user interface design for creating resizable UI elements like buttons, panels, and windows.

The idea behind the nine-slice technique is to divide an image into nine sections by placing four guides along its edges: one for each corner, one for each side’s center, and one for the center of the image. This divides the image into a 3×3 grid. The corners and edges are then anchored, while the central section can be scaled to fit the desired dimensions. This ensures that the corners and edges retain their original size and proportions, while the middle section stretches or tiles as needed.

Nine-slice scaling prevents distortion in the corners and edges of the image, making it particularly useful for UI elements with decorative borders, shadows, or other complex designs that need to maintain their appearance across different sizes.

The term “nine-slice” comes from the three slices in each dimension (horizontal and vertical) that can be resized independently, resulting in nine distinct sections.

Software tools and libraries, especially those used in game development and graphic design, often provide features or functions to achieve nine-slice scaling easily. This technique helps designers and developers maintain consistent and visually pleasing user interfaces regardless of the elements’ size adjustments.

Leave a Reply

Your email address will not be published. Required fields are marked *.

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>