【JavaScript】画像を縦方向・横方向に貼り付けるためのソースコード

strokeStyleメソッド、fillプロパティで画像を縦方向・横方向に貼り付けることができます。

テスト画像は自分で任意のものを用意しましょう。

【JavaScript】画像を縦方向・横方向に貼り付けるためのソースコード

context.createPattern(image, repetition)で、repeat, repeat-x, repeat-y, no-repeatなどの指定が可能です。

let cv = document.getElementById('cv');
let c = cv.getContext('2d');
let img = new Image();
img.setAttribute('src', '/image/updownheader.png');
img.addEventListener('load', function()
{
  c.fillStyle = c.createPattern(this, 'report');
  c.fillRect(0, 0, 400, 250);
}
,false
);