There is a background image of 50 by 50 px and a canvas of 500 by 500, you need to fill the entire canvas with background images. How to do it?

    1 answer 1

    It is possible so:

    <canvas id='canvas' width=250 height=250></canvas> <img src='http://900igr.net/up/datai/165870/0003-002-.png' id='img'/>

    Js:

     function ge(id) { return document.getElementById(id); } const canvas = ge('canvas'); const ctx = canvas.getContext('2d'); const canvasWidth = canvas.width; const canvasHeight = canvas.height; const img = ge('img'); for (let i = 0; i < canvasWidth; i += 50) { for (let j = 0; j < canvasHeight; j += 50) { ctx.drawImage(img, i, j); } }

    JSFiddle example