Cutting holes out of objects in HTML5?


I’m making a prototype about moving around puzzle pieces. If I have a piece like this:

And I want to scale the piece dynamically, WITHOUT scaling the cut-out holes, how would I do that?

My first instinct was to use blendmodes to cut out the holes with circles, but it seems blendmodes aren’t supported very well in HTML5? So I am open to other ideas on how to possibly do this.

I’m not drawing this shape with code or anything right now, so I don’t really have any code to show that would shed more light on the issue, so please let me know if you have any questions.


Sounds like the inverse of Flash’s 9-slice scaling or Android’s nine-patch scaling.

You can modify this process to fit your own needs. Step 1: move the nine pieces away from each other.

Step 2: expand the center piece horizontally, and expand the top and bottom pieces vertically.

Step 3: expand the corner pieces to fill the remaining space.

Step 4: scale the plus symbol, and place it on top of everything else.

Note the faint lines at the seams, especially towards the left. This happens based on the algorithm used, and it probably won’t happen to you if you use bitmaps, but it’s good to know what to look for. If it does happen to you, the easiest solution is to make everything overlap by one pixel.

1 Like

I have a few questions about this.

  1. That ‘moving the pieces away from each other’ --can that actually be done with just one source image? because I’ve tried to do it and failed.

  2. For the top- and bottom-mid pieces, can’t you just scale the middle right up to them and then just worry about scaling those horizontally?

  3. I don’t think the corner pieces can be scaled unless its in both directions, and I want to be able to scale this arbitrarily…but I don’t thiiiink this is actually a real problem?..I don’t know, I’d have to try it out.

Only if you split it up programmatically, but it’s much easier to start with nine images.


I’m not sure what you mean. If it helps, horizontal scaling is independent of vertical scaling.

If possible I’d rather split it up programmatically, as from a workflow perspective it’s much easier to manage. I’m just not convinced that’s possible on HTML5 :stuck_out_tongue:

I’m not talking from a programming perspective here–if you scale a corner-piece vertically but not horizontally (or vice versa) it’s gonna look inconsistent from the rest of the corner pieces

(you can see it looks okay, but the bottom part is much larger than intended.

Actually given that we want the corners to stay visually consistent throughout (one of the reasons behind nine-slice) the corner piece cant be stretched at all.

EDIT: actually this WILL be a problem. we’re going to need something to stretch vertically, and it can’t be the corners OR the cutout tiles. So what this actually needs is more of a 13-slice

So part of the corners can be left alone (the part where the corners actually are) but the rest has to be cut out so it can be scaled vertically. Bit of a mess! But I don’t really see an alternative :confused: :confused:

True. It’s worth noting that my original suggestion (scaling the middle piece horizontally but not vertically) helps keep things consistent, even though it isn’t perfect.

BitmapData.copyPixels() doesn’t work?

If you’re going that far, it might be worth going all the way to 25 slices. At least then you can handle it consistently.

It looks like this is how Google handles it, though I can’t find any documentation on the subject. Based on the images available here, you’d set it up like this:

The one-pixel black lines indicate which parts of the image scale. The right and bottom lines are redundant as far as I can tell, but Google includes them so I did too. (I figure it’s worth following an existing standard rather than inventing your own.)

The left lines indicate which parts should be scaled vertically, and the top lines indicate which parts should be scaled horizontally. Remember to remove the one-pixel border as you split the image!