ブログでHTML5 Canvas 画像

画像を描く

<canvas id="drawImageCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawImageCanvas");
        var context = canvas.getContext("2d");
        var image = new Image();
        image.onload = function () {
            context.drawImage(image, 30, 20);
        };
        image.src = "http://blog.cnobi.jp/v1/blog/user/118c300f2ee0ad311e5962b0167205f5/1439584363";
    })();
</script>

context.drawImageには、3つの呼び出し方があります。

context.drawImage(image, x, y);
context.drawImage(image, x, y, width, height);
context.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, x, y, width, height);

imageは描画するイメージです。
xはキャンバス上のx座標で、イメージが描かれる場所です。
yはキャンバス上のy座標で、イメージが描かれる場所です。

widthは描かれるイメージの横幅です。
heightは描かれるイメージの縦幅です。

sourceXは元イメージのx座標で、そこから描かれます。
sourceYは元イメージのy座標で、そこから描かれます。
sourceWidthは描く元イメージをクリップする横幅です。
sourceHeightは描く元イメージをクリップする縦幅です。