Slicing an Image
We'll cover the following...
The last image-related manipulation we will look at involves taking an image, trimming the parts of it you don’t care much about, and taking this smaller image to then display in our canvas
. This manipulation is more commonly (and concisely!) known as slicing. The way it works is by using yet another variant of the drawImage
method:
Press + to interact
// this is another drawImage variant!context.drawImage(image, x, y, w, h, x2, y2, w2, h2)
This variant takes nine (YES, NINE!) arguments, and they don’t make any sense if you see them for the first time. Parsing the arguments, the x and y stand for position ...