Commit 9d017860 authored by colmoneill's avatar colmoneill
Browse files

Update 08-spritesheets/README.md

parent f20bf812
......@@ -2,7 +2,6 @@
To animate spritesheets based on input we will be heavily reliant on all of the optional argument of the drawImage function
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
![](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage/canvas_drawimage.jpg)
......@@ -19,3 +18,31 @@ context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
important to refer to docs here https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
## sX, sY, sWidth, sHeight
The first four arguments refer to the Selection. `SelectionX, SelectionY, SelectionWidth, SelectionHeight`
In other words, we first clip / crop / select in the spritesheet.
## dX, dY, dWidth, dHeight
The last four arguments refer to the Destination. `DestinationX, DestinationY, DestinationWidth, DestinationHeight`
So these parameters set where the clipped bit of the spritesheet gets shown in the canvas.
## More legible `.drawImage()`
```
context.drawImage(imageVar,
SelectionX,
SelectionY,
SelectionWidth,
SelectionHeight,
DestinationX,
DestinationY,
DestinationWidth,
DestinationHeight
);
```
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment