Theory

When constructing the resized image, this algorithm first positions the original corner parts (1, 3, 7, 9) in the corners of the resulting image without modifying them. Next, it positions the edge parts (2, 4, 6, 8) on the edges of the resulting image and stretches them horizontally (2, 8) and vertically (4, 6). The remaining hole in the center is filled by stretching part 5.

This scaling technique is useful for fancy buttons, windows and the like. By only stretching the middle parts, the corners remain as is and are safe from unintended distortions. Let's take a look at how to implement this algorithm with the HTML Canvas API and JavaScript.

Implementation

Start by setting everything up. We need a canvas element, a rendering context and an image.

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 = "/box.png"
img.onload = () => // render logic here

As soon as the image loads, we'll start rendering. Calculate the size of a slice by dividing the image width by 3. Define each part with a 4 number tuple. The numbers represent the position (x, y) and size (width, height) of the part in the original image.

// calculate the size of a slice
const s = img.width / 3

// define the 9 parts as [x, y, width, height]
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]

To render the target image, perform a total of 9 drawImage() calls that implement the logic described in the beginning of this article. The parts can easily be passed to the function calls by using the spread operator.

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

  // 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)

Putting it all together, we arrive at the following solution. Try changing the target width and height to make sure it works as intended. If you want to go even further, try putting the 9-slice algorithm into a reusable function.

Closing remarks

Even though the Canvas API lacks built-in support for 9-slice scaling, it's simple enough to implement it yourself. By using this technique, images become more flexible and can be resized freely without any distortions. Where have you seen or used 9-slice scaling in the web? Let me know in the comments.

References

• Box sprite by PixelFrog
• Unity manual: 9-slicing Sprites
• MDN: CanvasRenderingContext2D.drawImage()

Please take a minute to think about how you'd build a simple component system with vanilla JavaScript, no framework, no nothing. Got it? Chances are, you're thinking about a simple function that takes in some parameters and returns some HTML. Something kind of like this:

// component
function Card(props: { title: string, body: string }) {
  return `<div>
    <h2>${props.title}</h2>
    <p>${props.body}</p>
  </div>`
}

// usage
document.body.innerHTML = `
  <h1>Welcome to my website</h1>
  ${Card({
    title: "HTML",
    body: "Defines the meaning and structure of web content",
  })}

  ${Card({
    title: "CSS",
    body: "Describes the presentation of a document written in HTML",
  })}
`

I've taken the liberty to use TypeScript to make it a bit more robust and self-documenting, but that's optional. As you can see, we're just defining a simple reusable function and call it inside our page template later to create instances of our component. Intuitive, simple and without any vendor specific boilerplate.

Please proceed to take a look at the following React code:

// component
function Card(props: { title: string, body: string }) {
  return <div>
    <h2>{props.title}</h2>
    <p>{props.body}</p>
  </div>
}

// usage
function App() {
  return <div>
    <h1>Welcome to my website</h1>
    <Card
      title="HTML"
      body="Defines the meaning and structure of web content"
    />
    <Card
      title="CSS"
      body="Describes the presentation of a document written in HTML"
    />
  </div>
}

Looks familiar, wouldn't you agree? All I had to do is remove the backticks around the HTML and the $ before the variable interpolation to turn the template string into what's known as JSX. And instead of calling the function directly, we can now call it with a syntax closer to normal HTML, where the tag name is the function name and the arguments are passed like attributes. Under the hood, it's still a good old function though. And that's the beauty of it.

Instead of introducing its own way of defining properties, like Angular or Vue do, React embraces JavaScript's native capabilities. Components are simply functions, properties simply arguments. This also means that we can do everything with them we can do with ordinary functions, like making the arguments type safe with TypeScript, again, without adding any kind of framework specific boilerplate.

This philosophy is why I have such high hopes for the future of React. By keeping its API light, almost invisible, the maintenance horror of future API changes reduces drastically. It's also easier to get started, because, in the end, it's just JavaScript the way you know and love it. JSX might look scary at first, especially if you aren't used to functions like map() or short-circuit evaluation, but I urge you to give it a try, even if you may have disliked it at first glance.

In my opinion, more frameworks should strive to reduce – and not increase – their surface area the way React did with its function components. Elegance lies in simplicity after all, right?